.focus_border {
                  border: 3px red dashed;
                }

                :root {
  
                --color-golden-sunbeam: #E5CC83; /* A soft, golden-yellow shade */
                --color-sage-green: #7A8B6D; /* A muted, earthy green */
                --color-peach-frost: #F5BF9C; /* A warm, pastel peach */
                --color-rosewood-red: #AC6A6A; /* A deep, dusty red */
                --color-autumn-spice: #DD875E; /* A rich, warm orange-brown */

                --color-snow-white: #FFFFFF; /* A soft classic grey */
                --color-classic-grey: #FAFAFA; /* A soft classic grey */
                --color-vanilla-cream: #FAF7EB; /* A creamy vanilla tone */
                --color-eggshell-white: #FBF0E8; /* A soft eggshell white */
                --color-blushing-pink: #F9E7E7; /* A gentle blushing pink */
                --color-frosted-lavender: #FAEEF3; /* A frosty lavender tint */
                --color-warm-sandstone: #EBD6C7; /* A warm sandstone shade */
                --color-toasted-almond: #CFBCA9; /* A toasted almond hue */
                --color-gentle-grey: #CCCBC5; /* A muted gentle grey */
                --color-morning-mist: #D8E9F1; /* A misty morning blue */
                --color-lush-meadow: #E9F9EF; /* A lush meadow green */
                --color-arctic-white: #FFFFFF; /* Pure arctic white */
                --color-mine-black: #000000; /* Deep black */
                --color-black-ash: #535252; /* Deep black */

                --color-ruby-red: #901C1E; /* Deep ruby red */
                --color-fiery-red: #B51A1D; /* Bold fiery red */
                --color-earthy-brown: #96644E; /* Warm earthy brown */
                --color-rust-orange: #B9693B; /* Rich rust orange */
                --color-golden-mustard: #CAA94E; /* Deep golden mustard */
                --color-warm-orange: #D9924A; /* Sun-kissed warm orange */
                --color-soft-taupe: #CFB8A5; /* Muted soft taupe */
                --color-sunlit-yellow: #E8CC84; /* Gentle sunlit yellow */
                --color-mangrove-green: #3E6A58; /* Deep mangrove green */
                --color-sage-leaf: #7A8B6D; /* Muted sage green */
                --color-kingfisher-blue: #71A1A1; /* Cool kingfisher blue */
                --color-forest-green: #A9C2A9; /* Soft forest green */
                --color-seafoam-green: #A3B5AC; /* Gentle seafoam green */
                --color-succulent-grey: #AAAFA5; /* Delicate succulent grey */
                --color-greige-mist: #D0CCC6; /* Soft greige mist */
                --color-latte-cream: #CDAE9E; /* Warm latte cream */
                --color-peacock-blue: #253663; /* Deep peacock blue */
                --color-space-grey: #546172; /* Cool space grey */
                --color-river-blue: #60829E; /* Flowing river blue */
                --color-dusty-blue: #86A0B9; /* Soft dusty blue */
                --color-sky-haze: #AEC2CE; /* Gentle sky haze */
                --color-charcoal-grey: #818686; /* Deep charcoal grey */
                --color-misty-grey: #CACCCB; /* Soft misty grey */
                --color-lavender-hush: #8F586A; /* Subtle lavender hue */
                --color-wisteria-blush: #B89A9F; /* Muted wisteria blush */
                --color-dusty-lilac: #BEB0B7; /* Soft dusty lilac */
                --color-peaches-keen: #EED3C4; /* Warm peaches keen */
                --color-dahlia-blush: #D2968E; /* Delicate dahlia blush */
                --color-soft-rose: #E2ABA5; /* Gentle soft rose */
                --color-peony-pink: #DDBBB8; /* Romantic peony pink */
                --color-menta-frost: #EEDCDD; /* Subtle menta frost */
                --color-soft-violet: #D1B2CE; /* Warm soft violet */
                --color-parma-mist: #DDCBD5; /* Delicate parma mist */
                --color-peach-glow: #F5BF9F; /* Warm peach glow */
                --color-california-sunset: #E5B498; /* Golden California sunset */
                --color-warm-biscuit: #F1E1D6; /* Soft warm biscuit */
                --color-watermelon-sugar: #EA6794; /* Vibrant watermelon pink */
                --color-marshmallow-blush: #F9D4D8; /* Soft marshmallow blush */

                --font-serif: 'Times New Roman', serif;
                --font-sans-serif: Arial, sans-serif;
                --font-luckiest-guy: 'Luckiest Guy', sans-serif;
                --font-didot: 'Didot', serif;
                --font-alte-din-gepraegt: 'Alte DIN gepraegt', sans-serif;
                --font-alte-din: 'Alte DIN', sans-serif;
                --font-futura-pt-book: 'Futura PT Book', sans-serif;
                --font-futura-pt: 'Futura PT', sans-serif;
                --font-futura-pt-demi: 'Futura PT Demi', sans-serif;
                --font-tuesday-night: 'Tuesday Night', cursive;
                --font-spanish-signature: 'Spanish Signature', cursive;
                --font-yeseva-one: 'Yeseva One', sans-serif;
                --font-sorts-mill-goudy: 'Sorts Mill Goudy', serif;
                --font-montserrat: 'Montserrat', serif;
                --font-allura: 'Allura', serif;
                --font-antic-didone: 'Antic Didone', serif;
                --font-cinzel: 'Cinzel', serif;
                --font-abril-fatface: 'Abril Fatface', serif;
                --font-poiret-one: 'Poiret One', serif;
                --font-sacramento: 'Sacramento', serif;
                --font-libre-baskerville: 'Libre Baskerville', serif;
                --font-bodoni-moda: 'Bodoni Moda', serif;
                --font-znaki-zodiaku: 'Znaki Zodiaku', serif;
                --font-merriweather: 'Merriweather', serif;

                }

                nav {
                    background-color: #fff;
                }

                .header, .scroll-container  {
                    background-color: #fff;
                }

                /* Mirror the site's .container-padding > .row constraint (desktop only) */
                @media (min-width: 992px) {
                    .container-padding > form > .row {
                        max-width: var(--max-width);
                        margin-left: auto;
                        margin-right: auto;
                    }
                }

                /* Fix: nav header has mt-2 which shows gray body bg through.
                   Convert external margin to internal padding so the height matches other pages
                   and the gap area is covered by the element's white background. */
                @media (min-width: 768px) {
                    .container-fluid.header.mt-2 {
                        margin-top: 0 !important;
                        padding-top: 8px !important;
                    }
                }

                .side-panel {
                     background-color: #fff;
                     outline: 1px solid #D8D8D8;
                }

                #posterPreview {
                    border-top: 1px solid #D8D8D8;
                }


                .form-control {
                    font-size:14px;
                }

                .context-menu {
                  background: #fff;
                  border: 1px solid #ccc;
                  padding: 10px;
                  z-index: 1000;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                  align-items: center;
                  gap:10px;
                  width: 100%;
                }

                .color-options {
                  gap: 5px;
                  margin-top: 0px;
                  align-items: center;
                  display: flex;
                  flex-wrap: wrap; /* Allows colors to wrap on desktop */
                }

                .color-swatch {
                  width: 32px;
                  height: 32px;
                  border-radius: 0;
                  cursor: pointer;
                  border: 1px solid rgba(0, 0, 0, 0.3);
                  margin-right: 4px;
                  display: inline-block;
                }

                .color-swatch:hover {
                  border-color: grey;
                }

                @font-face {
                    font-family: 'Didot';
                    src: url('../fonts/Didot.woff2') format('woff2'),
                        url('../fonts/Didot.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }
                @font-face {
                    font-family: 'Alte DIN gepraegt';
                    src: url('../fonts/AlteDIN1451Mittelschriftgepraegt.woff2') format('woff2'),
                        url('../fonts/AlteDIN1451Mittelschriftgepraegt.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }

                @font-face {
                    font-family: 'Alte DIN';
                    src: url('../fonts/AlteDIN1451Mittelschrift.woff2') format('woff2'),
                        url('../fonts/AlteDIN1451Mittelschrift.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }
                @font-face {
                    font-family: 'Futura PT Book';
                    src: url('../fonts/FuturaPT-Book.woff2') format('woff2'),
                        url('../fonts/FuturaPT-Book.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }

                @font-face {
                    font-family: 'Futura PT';
                    src: url('../fonts/FuturaPT-Bold.woff2') format('woff2'),
                        url('../fonts/FuturaPT-Bold.woff') format('woff');
                    font-weight: bold;
                    font-style: normal;
                }

                @font-face {
                    font-family: 'Futura PT Demi';
                    src: url('../fonts/FuturaPT-Demi.woff2') format('woff2'),
                        url('../fonts/FuturaPT-Demi.woff') format('woff');
                    font-weight: 600;
                    font-style: normal;
                }

                @font-face {
                    font-family: 'Tuesday Night';
                    src: url('../fonts/TuesdayNight-Regular.woff2') format('woff2'),
                        url('../fonts/TuesdayNight-Regular.woff') format('woff');
                    font-weight: 600;
                    font-style: normal;
                }

                @font-face {
                    font-family: 'Spanish Signature';
                    src: url('../fonts/SpanishSignature-Regular.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }

                @font-face {
                    font-family: 'Znaki Zodiaku';
                    src: url('../fonts/znaki-zodiaku.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }
                
                /* Default styles for all devices */

                .text_layer:focus {
                    outline: none; /* Removes outline when focused */
                }

                /* Media query for mobile devices */
                @media (max-width: 991px) {
                    .text_layer:focus-visible {
                        outline: 1px dashed #8639F7;
                    }

                    .text_layer:focus {
                        outline: none;
                    }

                    .color-options {
                        overflow-x: auto;
                        white-space: nowrap;
                        -webkit-overflow-scrolling: touch;
                        padding-bottom: 10px;
                        flex-wrap: nowrap;
                    }

                    .color-swatch {
                        flex-shrink: 0;
                        height: 48px;
                        width: 48px;
                    }

                    .side-panel {
                        outline: none;
                        padding: 0;
                    }

                    /* Prevent inner panel rows from expanding .side-panel white background
                       to nearly full viewport width (Bootstrap -12px negative margins would
                       otherwise push it to 4px from each edge while poster is inset ~28px) */
                    .col-lg-3 > .row {
                        margin-left: 0 !important;
                        margin-right: 0 !important;
                    }
                }

            input.text_layer:empty:before {
                content: '\00a0'; /* Invisible space character */
                visibility: hidden; /* Prevent visual interference */
            }



            .color_picker {
                display: block;
            }

              .color_picker > .color {
                width: 48px;
                height: 48px;
                border-radius: 0;
                outline: 1px solid grey;
                margin-right: 4px;
                display: block;
              }

            .color_picker > .color:hover {
                outline: 1px solid #000;
              }