:root{--attachment-size:125px;--attachment-remove-icon-size:28px;--page-aspect-ratio:1.3}.attached-pages{margin:15px 0}.attached-page-wrapper,.attached-page-wrapper-center{position:relative;width:calc(var(--attachment-size)/var(--page-aspect-ratio))}.attached-page{background-color:var(--dox-bg-input);border:none;border-radius:1px;box-shadow:var(--dox-shadow-elevation-1);height:var(--attachment-size);overflow:hidden;width:calc(var(--attachment-size)/var(--page-aspect-ratio));z-index:1}.attached-page .attached-page-previewable,.attached-page img{cursor:pointer;height:var(--attachment-size);-o-object-fit:cover;object-fit:cover;width:calc(var(--attachment-size)/1.3)}.attached-page .dox-loader-spinner{position:absolute}.attached-page .attached-edit-button-wrapper{align-items:flex-end;display:flex;gap:var(--dox-spacing-xs);height:100%;justify-content:center;left:0;padding-bottom:var(--dox-spacing-xs);pointer-events:all;position:absolute;top:0;width:100%;z-index:1}.attached-page .with-filename{padding-bottom:var(--dox-spacing-md)}.attached-page .dox-button{opacity:1;transition:opacity var(--dox-transition-duration) ease}.attached-page-file-name{font-size:var(--dox-font-size-xs);margin-top:var(--dox-spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attached-page-cover{background-color:var(--dox-color-white);pointer-events:none}.attached-page-add,.attached-page-failed{background-color:var(--dox-bg-surface-sunken);cursor:pointer;position:relative;text-align:center}.attached-page-add-input{display:none}.attached-page-label-file-count,.attached-page-label-file-types{left:-1px;padding:0;position:absolute;top:-1px}.attached-page-cannot-be-previewed{color:var(--dox-color-text-tertiary);padding:35% var(--dox-spacing-xs);text-align:center}.attached-page-cannot-be-previewed .dox-loader-spinner{position:relative}.attached-page-cannot-be-previewed svg{font-size:20px}.attached-page-cannot-be-previewed-text{font-size:10px}.attached-page-loading{align-items:center;display:flex}@media(width<=375px){.attached-page-wrapper{margin-right:15px}.attached-page-wrapper:nth-child(3n){margin-right:0}}@media(width<=360px){:root{--attachment-size:100px}.attached-page-wrapper{height:var(--attachment-size);width:calc(var(--attachment-size)/1.3)}.attached-page-remove{font-size:var(--attachment-remove-icon-size);height:var(--attachment-remove-icon-size);right:calc(var(--attachment-remove-icon-size)/-2);top:calc(var(--attachment-remove-icon-size)/-2);width:var(--attachment-remove-icon-size)}.attached-page,.attached-page img{height:var(--attachment-size);width:calc(var(--attachment-size)/1.3)}.attached-page-add svg{line-height:var(--attachment-size)}.attached-page-add:after{line-height:100px}.attached-page-cannot-be-previewed{padding:21% 5px}.attached-page-cannot-be-previewed-text{font-size:9px}}@media(width<=310px){.attached-page-wrapper:nth-child(3n){margin-right:15px}}