> ## 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

# Image resizing and cropping

Responsive design and art direction generally requires displaying images  at a variety of sizes, often much smaller than the original.

If you deliver full size images and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to download unnecessarily large files. Therefore, images  should always be delivered from the server at their final size.

When you use any of the Cloudinary [resizing transformations](transformation_reference#c_crop_resize), the sizing (scaling/cropping) is performed on the server side, and the asset is always delivered to the browser at the requested size.

Here are some examples of different cropping techniques used on the same image. Click each image to see the URL parameters applied in each case:

Original image

Focus on themodel in aportrait crop

Detect theface for athumbnail crop

Automatically determine what to keep in a banner crop

> **TIP**:
>
> :title=Tips:

> * To help you learn about the different cropping and resizing modes, try out the [interactive demo](resizing_and_cropping#resizing_and_cropping_interactive_demo).

> * Resizing images can lead to a reduction in image quality. Cloudinary provides solutions for both [upscaling](image_upscaling_and_downscaling#upscaling_with_super_resolution) and [downscaling](image_upscaling_and_downscaling#downscaling_tips) to help retain the details in your images.
## Resize dimensions {anchor:setting_the_resize_dimensions}

You can set the target dimensions of your resized image by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.

**To set dimensions using exact pixel values:**

* Use an integer value for [w (width)](transformation_reference#w_width) or [h (height)](transformation_reference#h_height). For example, `w_150` sets the width to exactly 150 pixels.

**To set dimensions relative to the original:**

* Use a decimal value for width or height. For example, `w_0.5` sets the width to half the original width.
* Use `ih` or `iw` as values to set the dimension to the initial height or initial width of the original image respectively. For example, `w_iw` sets the width to the same value as the original width. This may be useful when applying chained transformations or setting the dimensions of an [overlay](cloudinary_glossary#overlay).

**To set dimensions using aspect ratio:**

Use the [ar (aspect ratio)](transformation_reference#ar_aspect_ratio) parameter with one of the following formats:

* `a:b` where `a` signifies the relative width and `b` the relative height (e.g., `ar_4:3` or `ar_16:9`).
* A decimal value representing the ratio of the width divided by the height (e.g., `ar_1.33` or `ar_2.5`). 1.0 is a perfect square.

**Automatic dimension calculation:**

When specifying the dimensions for a scale crop, you'll generally want to only specify one dimension, and let Cloudinary automatically determine the other dimension to ensure the original aspect ratio is preserved. 

Conversely, when using a resize mode that's intended to crop part of the asset and change the aspect ratio compared to the original, it's generally recommended to specify both width and height or width/height along with an aspect ratio to define the exact required dimensions. However, in rare cases, you may choose to specify only one of these three resize qualifiers, and let Cloudinary automatically determine the missing dimension as follows:

* **If you provide only width or only height**, then the other dimension is automatically calculated to deliver the original aspect ratio.  For example, if your original asset is 400\*600, then specifying `c_crop,w_200` is the same as specifying `c_crop,w_200,h_300`. Supported for all resize and crop modes.  
* **If you provide only the aspect ratio** (for [cropping modes](#cropping_modes) only): 
    * If `ar` > 1, the original width is maintained and the height is cropped to deliver the requested ratio.
    * If `ar` 

c_crop,h_200,w_200

c_scale,h_200,w_200

c_fill,h_200,w_200

b_brown,c_pad,h_200,w_200

You could deliver the `c_fill` transformation shown above as follows:

![Man with camera](https://res.cloudinary.com/demo/image/upload/c_fill,h_200,w_200/docs/camera-640.jpg "with_image:false")

```nodejs
cloudinary.image("docs/camera-640.jpg", {height: 200, width: 200, crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  fill().width(200).height(200)
);
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  fill().width(200).height(200)
);
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  fill().width(200).height(200)
);
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  fill().width(200).height(200)
);
```

```python
CloudinaryImage("docs/camera-640.jpg").image(height=200, width=200, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera-640.jpg'))
	->resize(Resize::fill()->width(200)
->height(200));
```

```java
cloudinary.url().transformation(new Transformation().height(200).width(200).crop("fill")).imageTag("docs/camera-640.jpg");
```

```ruby
cl_image_tag("docs/camera-640.jpg", height: 200, width: 200, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(200).Crop("fill")).BuildImageTag("docs/camera-640.jpg")
```

```dart
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.fill().width(200)
.height(200)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(200).setCrop("fill")).generate("docs/camera-640.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().height(200).width(200).crop("fill")).generate("docs/camera-640.jpg");
```

```flutter
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.fill().width(200)
.height(200)));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-640.jpg")
	 resize(Resize.fill() { width(200)
 height(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-640.jpg", {height: 200, width: 200, crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  fill().width(200).height(200)
);
```

## Resizing and cropping interactive demo
Try out this interactive demo to see the results of different cropping and resizing methods, given a specific viewport size.

Choose your starting image, cropping mode, gravity and cropping/viewport dimensions, then click the button to generate the new image.

Square

Portrait

Landscape

Small

Original image size: 1920 x 1920

Cropping mode:

  Fill (c_fill)
  Limit fill (c_lfill)
  Fill with padding (c_fill_pad)
  Crop (c_crop)
  Thumbnail (c_thumb)
  Auto (c_auto)
  Scale (c_scale)
  Fit (c_fit)
  Limit fit (c_lfit)
  Minimum fit (c_mfit)
  Pad (c_pad) - auto background
  Limit pad (c_lpad) - auto background
  Minimum pad (c_mpad) - auto background
  Pad (c_pad) - AI gen background
  Limit pad (c_lpad) - AI gen background
  Minimum pad (c_mpad) - AI gen background

Gravity:

  None / Center
  Top left (g_north_west)
  Auto (g_auto)
  Auto: handbag (g_auto:handbag)
  Handbag (g_handbag)

Cropping/viewport dimensions:

  Small landscape (16:9) (h_169,w_300)
  Large landscape (16:9) (h_366,w_650)
  Small portrait (3:4) (h_300,w_225)
  Large portrait (3:4) (h_650,w_488)
  Small square (h_300,w_300)
  Large square (h_650,w_650)
  Specify no dimensions

Apply settings

 https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,h_169,w_300/docs/handbag1.jpg


**Things to know about this demo:**

* Not all combinations of cropping and gravity are valid, for example, gravity can't be used together with `scale`, or any of the `fit` or `pad` options (except `fill with padding`), and `fill with padding` only works with auto-gravity options.
* The gravity options `g_auto:handbag` and `g_handbag` use the [Cloudinary AI Content Analysis Add-on](cloudinary_ai_content_analysis_addon).
* Although Cloudinary recommends storing your highest resolution images, and delivering scaled-down versions, here you can choose between two sizes of one of the images to show how some modes can give different results depending on the resolution, and to demonstrate the different fit modes.
* The option to specify no dimensions is intended for use with `g_handbag` and a cropping option. You can also use it to compare the difference in bytes delivered with and without dimensions using other cropping modes, by inspecting the resulting image properties in your browser.

> **READING**:
>
> * [Image crop modes](image_crop_modes): Detailed examples of all cropping modes, including `fill`, `lfill`, `fill_pad`, `crop`, `thumb`, and `auto`, plus an interactive demo.

> * [Image resize modes](image_resize_modes): Detailed examples of `scale`, `fit`, `limit`, and `mfit`.

> * [Image padding modes](image_padding_modes): Detailed examples of `pad`, `lpad`, and `mpad`.

> * [Image gravity for crops](image_gravity): Control which part of the image is kept when cropping, using compass positions, face detection, object positions, or liquid rescaling.

> * [Automatic gravity for image crops](image_automatic_gravity): Use AI-powered gravity to keep the most important content in frame, including focal preferences, algorithm selection, and device pixel ratio.

> * [Image upscaling and downscaling](image_upscaling_and_downscaling): Upscale with super resolution or preserve quality when downscaling.

> * [Face-detection based transformations](face_detection_based_transformations): Crop and transform images based on detected faces.

> * [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_addon): AI-powered content analysis for smarter cropping decisions.

.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 {
  filter: brightness(85%);
}

.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;
}