ASCII text
        
            1
            @import "/static/efficient-ui/MASTER.css"; 
        
            2
            :root { 
        
            4
                --gap-navbar: 1rem; 
        
            5
                --width-navbar-button: 0; 
        
            6
                --text-soft: #000000C0; 
        
            7
                --text-softer: #0000009A; 
        
            8
                --text-faint: #00000066; 
        
            9
                --text-softest: #00000033; 
        
            10
                --color-star: #FFC107; 
        
            11
                --color-shape-label: #0097A7;                    --color-shape-label-text: #ffffff; 
        
            12
                --shadow-card-inset: inset 0 3px 6px -4px rgba(0, 0, 0, 0.12), inset 0 3px 6px 0 rgba(0, 0, 0, 0.24), inset 0 1px 4px 0 rgba(0, 0, 0, 0.12); 
        
            13
                --1-star: #FF8079; 
        
            14
                --2-star: #FF8A65; 
        
            15
                --3-star: #FFAC1B; 
        
            16
                --4-star: #FBC02D; 
        
            17
                --5-star: #CDDC39; 
        
            18
                view-transition-name: root; 
        
            19
                --reserved-height-top: 0; 
        
            20
                --color-checkerboard-dark: #CFD8DC; 
        
            21
                --color-checkerboard-light: #FFFFFF; 
        
            22
            } 
        
            23
            .ripple-pad { 
        
            25
                background: #ffffff99; 
        
            26
                position: absolute; 
        
            27
                opacity: 1; 
        
            28
                transform: scale(0); 
        
            29
                animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards; 
        
            30
            } 
        
            31
            .button-flat .ripple-pad { 
        
            33
                background: var(--color-primary-3); 
        
            34
            } 
        
            35
            @keyframes RippleEffect { 
        
            37
                to { 
        
            38
                    transform: scale(1); 
        
            39
                    opacity: 0; 
        
            40
                } 
        
            41
            } 
        
            42
            button, input, .button:not(.link-button), select, .navbar a, .navrail a { 
        
            44
                position: relative; 
        
            45
                overflow: hidden; 
        
            46
            } 
        
            47
            nav#desktop-navbar { 
        
            49
                view-transition-name: navbar; 
        
            50
            } 
        
            51
            nav#mobile-navbar { 
        
            53
                view-transition-name: navbar-mobile; 
        
            54
            } 
        
            55
            p { 
        
            57
                color: var(--text-soft); 
        
            58
            } 
        
            59
            iconify-icon { 
        
            61
                /* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */ 
        
            62
                display: inline-block; 
        
            63
                width: 1em; 
        
            64
                height: 1em; 
        
            65
                font-size: 1.5em; 
        
            66
            } 
        
            67
            #annotation-zone, .annotation-zone { 
        
            69
                position: relative; 
        
            70
                user-select: none; 
        
            71
                overflow: hidden; 
        
            72
                transform-origin: 50% 50%; 
        
            73
                background-image: conic-gradient(var(--color-checkerboard-dark) 90deg, var(--color-checkerboard-light) 0 180deg, var(--color-checkerboard-dark) 0 270deg, var(--color-checkerboard-light) 0 360deg); 
        
            74
                background-size: 1rem 1rem; 
        
            75
                background-position: 0 0; 
        
            76
            } 
        
            77
            #annotation-zoom-container > #annotation-zone { 
        
            79
                overflow: visible; 
        
            80
            } 
        
            81
            #annotation-image, .annotation-image { 
        
            83
                user-drag: none; 
        
            84
                -webkit-user-drag: none; 
        
            85
                image-rendering: pixelated; 
        
            86
            } 
        
            87
            :not(#annotation-zoom-container) > #annotation-zone > svg, .annotation-zone > svg { 
        
            89
                width: 100%; 
        
            90
                height: 100%; 
        
            91
            } 
        
            92
            #annotation-zone > svg, .annotation-zone > svg { 
        
            94
                z-index: 1; 
        
            95
                position: absolute; 
        
            96
                top: 0; 
        
            97
                left: 0; 
        
            98
            } 
        
            99
            .annotation-ruler { 
        
            101
                z-index: 2; 
        
            102
                position: absolute; 
        
            103
                top: 0; 
        
            104
                left: 0; 
        
            105
                background: var(--color-accent); 
        
            106
                display: none; 
        
            107
            } 
        
            108
            #annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary { 
        
            110
                height: 1px; 
        
            111
                width: 100%; 
        
            112
            } 
        
            113
            #annotation-ruler-vertical, #annotation-ruler-vertical-secondary { 
        
            115
                width: 1px; 
        
            116
                height: 100%; 
        
            117
            } 
        
            118
            .shape { 
        
            120
                stroke: var(--color-accent); 
        
            121
                fill: var(--color-accent); 
        
            122
                fill-opacity: 0.1; 
        
            123
                stroke-width: 2px; 
        
            124
                --shape-stroke-width: 2px; 
        
            125
                vector-effect: non-scaling-stroke; 
        
            126
                pointer-events: auto; 
        
            127
                transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1), 
        
            128
                            fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1), 
        
            129
                            stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1); 
        
            130
                stroke-linecap: square; 
        
            131
                stroke-linejoin: miter; 
        
            132
            } 
        
            133
            .shape-polyline { 
        
            135
                fill: none; 
        
            136
            } 
        
            137
            .shape-point { 
        
            139
                stroke: var(--color-accent); 
        
            140
                stroke-width: 2px; 
        
            141
                --shape-radius: 2px; 
        
            142
                fill-opacity: 1; 
        
            143
                r: 0.001; 
        
            144
                vector-effect: non-scaling-stroke non-scaling-size; 
        
            145
                transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
        
            146
                            stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
        
            147
                            filter 0.25s cubic-bezier(0.61, 1, 0.88, 1); 
        
            148
            } 
        
            149
            .shape.selected { 
        
            151
                fill-opacity: 0.2; 
        
            152
                stroke-width: 4px; 
        
            153
                --shape-stroke-width: 4px; 
        
            154
                filter: drop-shadow(0 0 2px var(--text-soft)); 
        
            155
            } 
        
            156
            .shape-point.selected { 
        
            158
                fill-opacity: 1; 
        
            159
                r: 0.001; 
        
            160
                --shape-radius: 0.001; 
        
            161
                stroke-width: 6px; 
        
            162
            } 
        
            163
            .shape-container, .shape-container-viewonly { 
        
            165
                pointer-events: none; 
        
            166
            } 
        
            167
            .shape-container-viewonly > .shape, :is(.thumbnail-list > li, .thumbnail-card) .shape { 
        
            169
                fill: var(--color-info); 
        
            170
                stroke: var(--color-info); 
        
            171
                fill-opacity: 0; 
        
            172
                stroke-opacity: 0; 
        
            173
                transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1), 
        
            174
                            stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1); 
        
            175
            } 
        
            176
            .shape-container-viewonly > .shape-polyline, :is(.thumbnail-list > li, .thumbnail-card) .shape-polyline { 
        
            178
                fill: none; 
        
            179
            } 
        
            180
            .shape-container-viewonly > .shape-point, :is(.thumbnail-list > li, .thumbnail-card) .shape-point { 
        
            182
                stroke: var(--color-info); 
        
            183
                transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
        
            184
                            stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
        
            185
                            filter 0.25s cubic-bezier(0.61, 1, 0.88, 1); 
        
            186
            } 
        
            187
            .shape-label { 
        
            189
                position: absolute; 
        
            190
                font-weight: 500; 
        
            191
                color: var(--color-shape-label-text) !important; 
        
            192
                pointer-events: auto; 
        
            193
                height: 28px; 
        
            194
                padding-left: 8px; 
        
            195
                padding-right: 8px; 
        
            196
                display: flex; 
        
            197
                align-items: center; 
        
            198
                justify-content: center; 
        
            199
                background: var(--color-shape-label); 
        
            200
                width: max-content; 
        
            201
                box-shadow: var(--shadow-button); 
        
            202
                /* top-left corner is square to point to the shape */ 
        
            203
                border-radius: 0 16px 16px 16px; 
        
            204
                opacity: 0; 
        
            205
                transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1), 
        
            206
                            transform 0.375s cubic-bezier(0.16, 1, 0.3, 1); 
        
            207
                transform: scale(0); 
        
            208
                transform-origin: top left; 
        
            209
                z-index: 3; 
        
            210
                text-decoration: none; 
        
            211
            } 
        
            212
            .shape-label:hover { 
        
            214
                text-decoration: underline; 
        
            215
            } 
        
            216
            /* Only show region parts when checkbox is checked */ 
        
            218
            #annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label { 
        
            219
                opacity: 1; 
        
            220
                transform: scale(1); 
        
            221
            } 
        
            222
            /* Hide points with a bubble */ 
        
            224
            #annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) { 
        
            225
                r: 0; 
        
            226
                border-width: 0; 
        
            227
            } 
        
            228
            #annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape { 
        
            230
                fill-opacity: 0.1; 
        
            231
                stroke-opacity: 1; 
        
            232
            } 
        
            233
            .thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape { 
        
            235
                fill-opacity: 0.2; 
        
            236
                stroke-opacity: 1; 
        
            237
            } 
        
            238
            @keyframes move-out { 
        
            240
                from { 
        
            241
                    transform: scale(1); 
        
            242
                    opacity: 1; 
        
            243
                } 
        
            244
                to { 
        
            245
                    transform: scale(0.5); 
        
            246
                    opacity: 0; 
        
            247
                } 
        
            248
            } 
        
            249
            @keyframes move-in { 
        
            251
                from { 
        
            252
                    transform: scale(0.5); 
        
            253
                    opacity: 0; 
        
            254
                } 
        
            255
                to { 
        
            256
                    transform: scale(1); 
        
            257
                    opacity: 1; 
        
            258
                } 
        
            259
            } 
        
            260
            @keyframes slide-in { 
        
            262
                from { 
        
            263
                    transform: translateX(-1.5rem); 
        
            264
                    opacity: 0; 
        
            265
                } 
        
            266
                to { 
        
            267
                    transform: translateX(0); 
        
            268
                    opacity: 1; 
        
            269
                } 
        
            270
            } 
        
            271
            @keyframes slide-out { 
        
            273
                from { 
        
            274
                    transform: translateX(0); 
        
            275
                    opacity: 1; 
        
            276
                } 
        
            277
                to { 
        
            278
                    transform: translateX(-1.5rem); 
        
            279
                    opacity: 0; 
        
            280
                } 
        
            281
            } 
        
            282
            @media (prefers-reduced-motion: no-preference) { 
        
            284
                .thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone, 
        
            285
                html:not(:has(.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone)) #annotation-zone { 
        
            286
                    view-transition-name: thumbnail; 
        
            287
                } 
        
            288
                ::view-transition-old(root), 
        
            289
                ::view-transition-new(root) { 
        
            290
                    transform-origin: top; 
        
            291
                    animation-duration: 0.5s; 
        
            292
                    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 
        
            293
                } 
        
            294
                ::view-transition-old(root) { 
        
            296
                    animation-name: move-out; 
        
            297
                } 
        
            298
                ::view-transition-new(root) { 
        
            300
                    animation-name: move-in; 
        
            301
                } 
        
            302
                ::view-transition-group(thumbnail) { 
        
            304
                    animation-duration: 0.5s; 
        
            305
                    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 
        
            306
                } 
        
            307
                #annotation-zone::view-transition-old(thumbnail) { 
        
            309
                    animation-duration: 0s; 
        
            310
                } 
        
            311
                ::view-transition-group(navbar), ::view-transition-group(navbar-mobile) { 
        
            313
                    animation-duration: 0.5s; 
        
            314
                    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 
        
            315
                } 
        
            316
            } 
        
            317
            .multi-select, .single-select { 
        
            319
                display: flex; 
        
            320
                flex-flow: column nowrap; 
        
            321
                overflow-y: scroll; 
        
            322
                box-shadow: var(--shadow-card-inset); 
        
            323
                padding: 16px; 
        
            324
                gap: 8px; 
        
            325
            } 
        
            326
            .licence-selection, .image-type-selection { 
        
            328
                display: flex; 
        
            329
                flex-flow: column nowrap; 
        
            330
            } 
        
            331
            .licence-selection-info, .image-type-selection-info { 
        
            333
                margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox)); 
        
            334
                /* Align with the checkbox above */ 
        
            335
            } 
        
            336
            .licence-selection-info > p, .image-type-selection-info > p { 
        
            338
                font-weight: 300; 
        
            339
            } 
        
            340
            .licence-logo { 
        
            342
                width: 128px; 
        
            343
                float: right; 
        
            344
                margin-left: 1ch; 
        
            345
            } 
        
            346
            .licence-title, .image-type-title { 
        
            348
                display: flex; 
        
            349
                justify-content: space-between; 
        
            350
                width: 100%; 
        
            351
            } 
        
            352
            .licence-title > .licence-name, .image-type-title > .image-type-name { 
        
            354
                font: var(--h5-font); 
        
            355
                font-weight: 400; 
        
            356
            } 
        
            357
            .icon-explainer { 
        
            359
                display: grid; 
        
            360
                gap: 4px 8px; 
        
            361
                grid-template-columns: auto 1fr; 
        
            362
                align-items: center; 
        
            363
            } 
        
            364
            .icon-explainer *:nth-child(even) { 
        
            366
                font-weight: 300; 
        
            367
            } 
        
            368
            .required-asterisk::after { 
        
            370
                content: "*"; 
        
            371
                color: var(--color-error); 
        
            372
            } 
        
            373
            small { 
        
            375
                /* BIG :D */ 
        
            376
                font-size: 1em; 
        
            377
            } 
        
            378
            #pagination { 
        
            380
                display: flex; 
        
            381
                gap: 1em; 
        
            382
                justify-content: center; 
        
            383
                align-items: center; 
        
            384
                font-size: 1.5em; 
        
            385
                font-weight: 600; 
        
            386
                flex: 1 0 auto; 
        
            387
            } 
        
            388
            #pagination > a { 
        
            390
                text-decoration: none; 
        
            391
                color: var(--color-accent-1); 
        
            392
            } 
        
            393
            #pagination-options > form { 
        
            395
                align-items: center; 
        
            396
                display: flex; 
        
            397
                gap: 1em; 
        
            398
            } 
        
            399
            #pagination-options { 
        
            401
                justify-content: center; 
        
            402
                align-items: center; 
        
            403
                gap: 1em; 
        
            404
                width: 100%; 
        
            405
            } 
        
            406
            .thumbnail-list { 
        
            408
                list-style: none; 
        
            409
                margin: 0 !important; 
        
            410
                display: grid; 
        
            411
                grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); 
        
            412
                gap: 16px; 
        
            413
            } 
        
            414
            .thumbnail-list > li, .thumbnail-card { 
        
            416
                transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1); 
        
            417
                box-shadow: var(--shadow-card); 
        
            418
                background: var(--color-card); 
        
            419
            } 
        
            420
            :is(.thumbnail-list > li, .thumbnail-card) > a, :is(.thumbnail-list > li, .thumbnail-card) { 
        
            422
                display: flex; 
        
            423
                flex-direction: column; 
        
            424
                justify-content: space-between; 
        
            425
                height: 100%; 
        
            426
            } 
        
            427
            :is(.thumbnail-list > li, .thumbnail-card) > .list-more { 
        
            429
                display: flex; 
        
            430
                flex-flow: row wrap; 
        
            431
                justify-content: space-between; 
        
            432
                align-items: center; 
        
            433
                padding: 8px; 
        
            434
            } 
        
            435
            :is(.thumbnail-list > li, .thumbnail-card):is(:hover, :focus, :has(:focus)) { 
        
            437
                box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08); 
        
            438
            } 
        
            439
            :is(.thumbnail-list > li, .thumbnail-card) .annotation-zone { 
        
            441
                transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1), 
        
            442
                            box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1); 
        
            443
            } 
        
            444
            :is(.thumbnail-list > li, .thumbnail-card):not(.thumbnail-card-no-zoom) .annotation-zone:hover { 
        
            446
                position: relative; 
        
            447
                transform: scale(2); 
        
            448
                z-index: 1; 
        
            449
                box-shadow: var(--shadow-textarea-active); 
        
            450
            } 
        
            451
            :is(.thumbnail-list > li, .thumbnail-card) .list-detail { 
        
            453
                padding: 8px; 
        
            454
                display: block; 
        
            455
            } 
        
            456
            a.button { 
        
            458
                text-decoration: none; 
        
            459
            } 
        
            460
            dt { 
        
            462
                font-weight: 600; 
        
            463
            } 
        
            464
            dd { 
        
            466
                margin-left: 40px; 
        
            467
            } 
        
            468
            #mobile-navbar, #mobile-navbar-spacer { 
        
            470
                display: none; 
        
            471
            } 
        
            472
            @media screen and (max-width: 896px) { 
        
            474
                #mobile-navbar { 
        
            475
                    display: flex; 
        
            476
                } 
        
            477
                header { 
        
            478
                    position: fixed; 
        
            479
                    top: 0; 
        
            480
                    left: 0; 
        
            481
                    width: 100%; 
        
            482
                    z-index: 3; 
        
            483
                } 
        
            484
                #mobile-navbar-spacer { 
        
            485
                    display: block; 
        
            486
                    height: var(--height-navbar); 
        
            487
                } 
        
            488
                #desktop-navbar { 
        
            489
                    display: none; 
        
            490
                } 
        
            491
                :root { 
        
            492
                    --reserved-height-top: var(--height-navbar); 
        
            493
                } 
        
            494
            } 
        
            495
            #hamburger > nav { 
        
            497
                display: flex; 
        
            498
                flex-direction: column; 
        
            499
                gap: 1em; 
        
            500
                padding: var(--padding-card); 
        
            501
                padding-top: var(--padding-card-top); 
        
            502
                box-shadow: var(--shadow-card); 
        
            503
                background: var(--color-card); 
        
            504
                justify-content: space-between; 
        
            505
                width: clamp(240px, calc(100vw - 56px), 448px); 
        
            506
            } 
        
            507
            #hamburger > nav > ul { 
        
            509
                display: flex; 
        
            510
                flex-direction: column; 
        
            511
                gap: 1em; 
        
            512
                margin: 0; 
        
            513
            } 
        
            514
            #hamburger > nav > ul > li { 
        
            516
                display: flex; 
        
            517
                gap: var(--gap-label-checkbox); 
        
            518
                align-items: center; 
        
            519
                margin: 0; 
        
            520
            } 
        
            521
            #hamburger > nav > ul > li > a { 
        
            523
                display: contents; 
        
            524
                text-decoration: none; 
        
            525
                color: var(--color-card-text); 
        
            526
            } 
        
            527
            .star-rating-container { 
        
            529
                display: flex; 
        
            530
                flex-direction: row-reverse; 
        
            531
                font-size: 1.25em; 
        
            532
                align-items: center; 
        
            533
                justify-content: flex-end;   /* In this case, it means LEFT, not right, because of the row-reverse */ 
        
            534
            } 
        
            535
            .star-rating-container > input { 
        
            537
                width: 0 !important; 
        
            538
                height: 0 !important; 
        
            539
                visibility: hidden; 
        
            540
            } 
        
            541
            .star-rating-container > label { 
        
            543
                cursor: pointer; 
        
            544
                color: var(--text-softest); 
        
            545
                transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1), 
        
            546
                            filter 0.25s cubic-bezier(0.37, 0, 0.63, 1); 
        
            547
            } 
        
            548
            .star-rating-container > label:hover, 
        
            550
            .star-rating-container > label:hover ~ label { 
        
            551
                color: var(--color-star); 
        
            552
                filter: drop-shadow(0 0 3px #00000040); 
        
            553
            } 
        
            554
            .star-rating-container > input:checked ~ label { 
        
            556
                color: var(--color-star); 
        
            557
            } 
        
            558
            .visually-hidden { 
        
            560
                position: absolute; 
        
            561
                width: 1px; 
        
            562
                height: 1px; 
        
            563
                box-sizing: content-box; 
        
            564
                margin: -1px; 
        
            565
                overflow: hidden; 
        
            566
                clip-path: inset(50%); 
        
            567
                border: 0; 
        
            568
            } 
        
            569
            .rating-list { 
        
            571
                display: grid; 
        
            572
                grid-auto-columns: 1fr; 
        
            573
                gap: 0.5rem; 
        
            574
                grid-template-columns: auto; 
        
            575
                list-style: none; 
        
            576
                margin: 0 !important; 
        
            577
                padding: 0; 
        
            578
                min-width: 50%; 
        
            579
            } 
        
            580
            .rating-list > li { 
        
            582
                grid-column-start: 1; 
        
            583
                height: 28px; 
        
            584
                padding: 4px 8px; 
        
            585
                display: flex; 
        
            586
                align-items: center; 
        
            587
                justify-content: space-between; 
        
            588
                gap: 0.5rch; 
        
            589
                border-radius: 0 4px 4px 0; 
        
            590
                margin: 0; 
        
            591
            } 
        
            592
            @media screen and (max-width: 768px) { 
        
            594
                .rating-box { 
        
            595
                    flex-direction: column; 
        
            596
                    margin: 1rem; 
        
            597
                } 
        
            598
            } 
        
            599
            .rating-bar { 
        
            601
                display: flex; 
        
            602
                align-items: center; 
        
            603
                justify-content: flex-start; 
        
            604
                gap: 0.5rch; 
        
            605
                font-size: 1.25em; 
        
            606
                width: 100%; 
        
            607
            } 
        
            608
            .rating-bar > .rating-bar-segment { 
        
            610
                position: relative; 
        
            611
                width: 1em; 
        
            612
                height: 1em; 
        
            613
                clip-path: url(#star-clip); 
        
            614
                background: var(--text-softest); 
        
            615
            } 
        
            616
            .rating-bar > .rating-bar-segment > .rating-bar-filling { 
        
            618
                background: var(--color-star); 
        
            619
                height: 100%; 
        
            620
                position: absolute; 
        
            621
                top: 0; 
        
            622
                left: 0; 
        
            623
            } 
        
            624
            #picture-view { 
        
            626
                display: flex; 
        
            627
                flex-direction: row; 
        
            628
                gap: 1em; 
        
            629
                align-items: flex-start; 
        
            630
                justify-content: center; 
        
            631
                width: fit-content; 
        
            632
                margin: 0 auto; 
        
            633
            } 
        
            634
            #picture-view > x-frame { 
        
            636
                flex: 1 1 var(--width); 
        
            637
                margin: 0; 
        
            638
            } 
        
            639
            #picture-actions { 
        
            641
                --width: 256px; 
        
            642
                position: sticky; 
        
            643
                top: var(--reserved-height-top); 
        
            644
                overflow: auto; 
        
            645
                max-height: 100vh; 
        
            646
                height: 100%; 
        
            647
                background: var(--color-card); 
        
            648
                padding: 1rem 0; 
        
            649
                box-shadow: var(--shadow-card); 
        
            650
            } 
        
            651
            @media screen and (max-width: 768px) { 
        
            653
                #picture-view { 
        
            654
                    flex-direction: column; 
        
            655
                } 
        
            656
                #picture-view > x-frame { 
        
            657
                    flex: 1 1 auto; 
        
            658
                    margin: 0; 
        
            659
                } 
        
            660
                #picture-actions { 
        
            661
                    --width: 768px; 
        
            662
                    position: static; 
        
            663
                    padding: 1rem; 
        
            664
                } 
        
            665
                #picture-actions > ul { 
        
            666
                    width: 100%; 
        
            667
                    list-style: none; 
        
            668
                    margin: 0; 
        
            669
                    padding: 0; 
        
            670
                } 
        
            671
                #picture-actions > ul > li { 
        
            672
                    display: inline; 
        
            673
                } 
        
            674
                .action-list > li { 
        
            675
                    padding: 0 !important; 
        
            676
                } 
        
            677
            } 
        
            678
            .action-list { 
        
            680
                list-style: none; 
        
            681
                margin: 0 !important; 
        
            682
                padding: 0; 
        
            683
            } 
        
            684
            .action-list > li { 
        
            686
                display: flex; 
        
            687
                margin: 0; 
        
            688
                width: 100%; 
        
            689
                padding: 0.25rem 1rem; 
        
            690
            } 
        
            691
            .action-list > li > a { 
        
            693
                text-decoration: none; 
        
            694
                color: var(--color-card-text) !important; 
        
            695
                display: flex; 
        
            696
                align-items: center; 
        
            697
                gap: 0.5rch; 
        
            698
                font-weight: 400; 
        
            699
            } 
        
            700
            .action-list > li > details > summary { 
        
            702
                color: var(--color-card-text) !important; 
        
            703
                display: flex; 
        
            704
                align-items: center; 
        
            705
                gap: 0.5rch; 
        
            706
                font-weight: 400; 
        
            707
            } 
        
            708
            #picture-buttons { 
        
            710
                padding: 0 1rem; 
        
            711
            } 
        
            712
            @media print { 
        
            714
                #picture-actions, #annotation-view-controls { 
        
            715
                    display: none; 
        
            716
                } 
        
            717
                .navbar { 
        
            718
                    display: none; 
        
            719
                } 
        
            720
                :root { 
        
            721
                    --color-background: #ffffff; 
        
            722
                } 
        
            723
                #annotation-zone, .thumbnail-list { 
        
            724
                    width: 100vw; 
        
            725
                    height: auto; 
        
            726
                    position: relative; 
        
            727
                    left: calc(-1 * (50vw - 50%)); 
        
            728
                } 
        
            729
            } 
        
            730
            .navbar > ul { 
        
            732
                max-width: 100%; 
        
            733
            } 
        
            734
            #desktop-navbar > ul:first-child {  /* list containing title */ 
        
            736
                flex: 0 1 auto; 
        
            737
                min-width: 0; 
        
            738
            } 
        
            739
            #desktop-navbar > ul:last-child {  /* list containing navigation */ 
        
            741
                flex: 1 0 auto; 
        
            742
                justify-content: end; 
        
            743
            } 
        
            744
            #mobile-navbar-title, #desktop-navbar-title { 
        
            746
                font: var(--h5-font); 
        
            747
                font-weight: 700; 
        
            748
                white-space: nowrap; 
        
            749
                overflow: hidden; 
        
            750
                text-overflow: ellipsis; 
        
            751
                flex: 0 1 auto; 
        
            752
                min-width: 0; 
        
            753
            } 
        
            754
            nav .button-flat { 
        
            756
                --color-flat-button-hover: transparent; 
        
            757
                --color-flat-button-active: transparent; 
        
            758
            } 
        
            759
            nav .button-flat .ripple-pad { 
        
            761
                background: #ffffff99; 
        
            762
            } 
        
            763
            .warning { 
        
            765
                background: var(--color-alert); 
        
            766
                color: var(--color-alert-text); 
        
            767
                padding: 1rem; 
        
            768
                margin: 1rem 0; 
        
            769
                border-radius: var(--radius-card); 
        
            770
                box-shadow: var(--shadow-card); 
        
            771
                --color-link-text: #000000; 
        
            772
                --color-link-hover-text: #000000; 
        
            773
                --color-link-visited-text: #000000; 
        
            774
                --color-link-visited-hover-text: #000000; 
        
            775
                --color-link-active-text: #000000; 
        
            776
            } 
        
            777
            .warning h2 { 
        
            779
                font: var(--h3-font); 
        
            780
            } 
        
            781
            #annotation-zone { 
        
            783
                box-shadow: var(--shadow-card); 
        
            784
            } 
        
            785
            #hamburger-site-name { 
        
            787
                font: var(--h4-font); 
        
            788
                text-transform: uppercase; 
        
            789
                color: var(--color-accent); 
        
            790
            } 
        
            791
            #object-types { 
        
            793
                z-index: 3; 
        
            794
                background: var(--color-callout); 
        
            795
                color: var(--color-callout-text); 
        
            796
                --color-background-text: var(--color-callout-text); 
        
            797
                --color-label-text: var(--color-callout-text); 
        
            798
                box-shadow: var(--shadow-card); 
        
            799
                border-radius: var(--radius-input); 
        
            800
                position: absolute; 
        
            801
                display: none; 
        
            802
                overflow: auto; 
        
            803
            } 
        
            804
            #object-types-content { 
        
            806
                padding: 1rem; 
        
            807
            } 
        
            808
            #annotation-controls { 
        
            810
                display: flex; 
        
            811
                justify-content: space-between; 
        
            812
                gap: 1rem; 
        
            813
                padding: 0.5rem; 
        
            814
                align-items: stretch; 
        
            815
            } 
        
            816
            #annotation-controls > x-buttonbox { 
        
            818
                align-items: center; 
        
            819
            } 
        
            820
            #annotation-controls > x-buttonbox button:has(iconify-icon) { 
        
            822
                aspect-ratio: 1; 
        
            823
            } 
        
            824
            #annotation-controls > x-buttonbox button > iconify-icon { 
        
            826
                font-size: 1.5rem; 
        
            827
            } 
        
            828
            #annotation-helper-message { 
        
            830
                padding: 0.75rem; 
        
            831
                text-align: center; 
        
            832
                flex: 0 0 auto; 
        
            833
            } 
        
            834
            #annotation-zoom-container { 
        
            836
                flex: 1 1 auto; 
        
            837
                overflow: hidden; 
        
            838
                align-self: stretch; 
        
            839
                width: 100%; 
        
            840
                display: flex; 
        
            841
                justify-content: center; 
        
            842
                align-items: center; 
        
            843
                touch-action: none; 
        
            844
            } 
        
            845
            #annotation-zoom-container > #annotation-zone { 
        
            847
                transform: scale(1); 
        
            848
                transition: transform 0.125s cubic-bezier(0.28, 0.5, 0.31, 0.92); 
        
            849
                max-width: 100%; 
        
            850
                max-height: 100% !important; 
        
            851
                box-shadow: none; 
        
            852
            } 
        
            853
            #annotation-zoom-container > #annotation-zone > #annotation-image { 
        
            855
                object-fit: contain; 
        
            856
                width: 100%; 
        
            857
                height: 100%; 
        
            858
            } 
        
            859
            #annotation-main-area { 
        
            861
                display: flex; 
        
            862
                flex-direction: column; 
        
            863
                flex: 1 1 auto; 
        
            864
                overflow: auto; 
        
            865
                width: 100%; 
        
            866
            } 
        
            867
            body.fixed-content-area { 
        
            869
                max-width: 100vw; 
        
            870
                max-height: 100vh; 
        
            871
                display: flex; 
        
            872
                flex-direction: column; 
        
            873
            } 
        
            874
            body.fixed-content-area > main { 
        
            876
                flex: 1 1 auto; 
        
            877
                overflow: auto; 
        
            878
                display: flex; 
        
            879
                flex-direction: column; 
        
            880
            } 
        
            881
            #annotation-zoom-controls { 
        
            883
                display: flex; 
        
            884
                gap: 0.5rem; 
        
            885
                justify-content: center; 
        
            886
                align-items: center; 
        
            887
            } 
        
            888
            #zoom-indicator { 
        
            890
                width: 7ch; 
        
            891
                text-align: right; 
        
            892
            } 
        
            893
            #annotation-zoom-container { 
        
            895
                cursor: grab; 
        
            896
            } 
        
            897
            #object-types { 
        
            899
                cursor: auto; 
        
            900
            } 
        
            901
            .thumbnail-list-scroll { 
        
            903
                display: flex; 
        
            904
                flex-direction: row; 
        
            905
                overflow-x: auto; 
        
            906
                overflow-y: hidden; 
        
            907
                align-items: stretch; 
        
            908
                padding: 16px; 
        
            909
            } 
        
            910
            .thumbnail-list-scroll > li { 
        
            912
                flex: 0 0 192px; 
        
            913
            } 
        
            914
            .thumbnail-list-scroll > li > a .annotation-zone:hover { 
        
            916
                transform: none; 
        
            917
            } 
        
            918
            summary { 
        
            920
                cursor: pointer; 
        
            921
            } 
        
            922
            button, .button, input, select, textarea { 
        
            924
                box-sizing: border-box; 
        
            925
            } 
        
            926
            .button-danger { 
        
            928
                --color-button: var(--color-error); 
        
            929
                --color-button-hover: var(--color-error); 
        
            930
                --color-button-active: var(--color-error); 
        
            931
            } 
        
            932
            input[type="file"] { 
        
            934
                padding: 0.5rem; 
        
            935
                display: flex; 
        
            936
                font-style: italic; 
        
            937
            } 
        
            938
            .thumbnail-card-small > a > .annotation-zone { 
        
            940
                flex: 0 0 auto; 
        
            941
                max-width: 384px; 
        
            942
            } 
        
            943
            .thumbnail-card-small, .thumbnail-card-small > a { 
        
            945
                align-items: center; 
        
            946
            } 
        
            947
            .thumbnail-card-small { 
        
            949
                margin: auto; 
        
            950
            } 
        
            951