.x-preview{z-index:10000;background-color:#000000bf;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.x-preview .shortcut-keyboard{display:none}.x-preview__close,.x-preview__shortcut{z-index:1;background-color:var(--q-primary--5a);border-radius:32px;width:48px;height:48px;transition:background-color .5s;position:absolute;top:16px}.x-preview__close:hover,.x-preview__shortcut:hover{background-color:var(--q-primary)}.x-preview__shortcut{color:#fff;text-align:center;font-size:24px;line-height:48px;right:80px}.x-preview__shortcut:hover .shortcut-keyboard{color:#000;background-color:#f5f5f5;border-radius:5px;padding:8px;display:block;position:absolute;right:0;box-shadow:0 6px 6px -3px #0003,0 10px 14px 1px #00000024,0 4px 18px 3px #0000001f!important}.x-preview__close{right:16px}.x-preview__close:before,.x-preview__close:after{content:" ";background-color:#fff;height:2px;margin-top:50%;display:block;position:absolute;left:12px;right:12px}.x-preview__close:before{transform:rotate(-45deg)}.x-preview__close:after{transform:rotate(45deg)}.x-preview__body{flex:1;justify-content:space-between;align-items:center;height:0;display:flex;position:relative}.x-preview__prev,.x-preview__next{color:#fff;z-index:1;background-color:#0005;width:44px;height:60px;transition:background-color .5s;position:relative}.x-preview__prev:hover,.x-preview__next:hover{background-color:#000}.x-preview__prev:before,.x-preview__next:before{content:"";border-top:2px solid #fff;border-left:2px solid #fff;width:18px;height:18px;display:block;position:absolute;top:32%}.x-preview__prev:before{left:33%;transform:rotate(-45deg)}.x-preview__next:before{left:22%;transform:rotate(135deg)}.x-preview__image{max-width:100%;max-height:100%}.x-preview__image-box{justify-content:center;align-items:center;display:flex;position:absolute;top:3px;bottom:3px;left:3px;right:3px}.x-preview__image-rotate{text-align:center;color:#fff;background-color:#0005;width:50px;height:50px;margin-left:-25px;font-size:30px;position:absolute;bottom:20px;left:50%;line-height:50px!important}.x-preview__image-rotate:hover{background-color:#000}.x-preview__thumbs{text-align:center;overflow:hidden}.x-preview__thumbs-scroll{justify-content:center;column-gap:8px;padding-left:8px;padding-right:8px;display:inline-flex}.x-preview__thumbs-image{background-color:#fff4;background-position:50%;background-repeat:no-repeat;background-size:contain;flex:0 0 100px;width:100px;height:100px}.x-preview__thumbs-image--selected{border:2px solid var(--q-primary);flex-basis:96px;width:96px;height:96px}