daisyui/components/modal.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.modal{@layer daisyui.l1.l2.l3{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip;&::backdrop{display:none}&[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}}@layer daisyui.l1.l2{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);& .modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{opacity:0}}}}.modal-action{@layer daisyui.l1.l2.l3{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}}.modal-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed}}.modal-backdrop{@layer daisyui.l1.l2.l3{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid;& button{cursor:pointer}}}.modal-box{@layer daisyui.l1.l2.l3{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}.modal-top{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}}}.modal-middle{@layer daisyui.l1.l2{place-items:center;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}}}.modal-bottom{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}}}.modal-start{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1}}}.modal-end{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1}}}@media (width>=640px){.sm\:modal{@layer daisyui.l1.l2.l3{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip;&::backdrop{display:none}&[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}}@layer daisyui.l1.l2{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);& .modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{opacity:0}}}}.sm\:modal-action{@layer daisyui.l1.l2.l3{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}}.sm\:modal-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed}}.sm\:modal-backdrop{@layer daisyui.l1.l2.l3{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid;& button{cursor:pointer}}}.sm\:modal-box{@layer daisyui.l1.l2.l3{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}.sm\:modal-top{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}}}.sm\:modal-middle{@layer daisyui.l1.l2{place-items:center;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}}}.sm\:modal-bottom{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}}}.sm\:modal-start{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1}}}.sm\:modal-end{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1}}}}@media (width>=768px){.md\:modal{@layer daisyui.l1.l2.l3{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip;&::backdrop{display:none}&[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}}@layer daisyui.l1.l2{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);& .modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{opacity:0}}}}.md\:modal-action{@layer daisyui.l1.l2.l3{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}}.md\:modal-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed}}.md\:modal-backdrop{@layer daisyui.l1.l2.l3{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid;& button{cursor:pointer}}}.md\:modal-box{@layer daisyui.l1.l2.l3{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}.md\:modal-top{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}}}.md\:modal-middle{@layer daisyui.l1.l2{place-items:center;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}}}.md\:modal-bottom{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}}}.md\:modal-start{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1}}}.md\:modal-end{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1}}}}@media (width>=1024px){.lg\:modal{@layer daisyui.l1.l2.l3{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip;&::backdrop{display:none}&[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}}@layer daisyui.l1.l2{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);& .modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{opacity:0}}}}.lg\:modal-action{@layer daisyui.l1.l2.l3{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}}.lg\:modal-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed}}.lg\:modal-backdrop{@layer daisyui.l1.l2.l3{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid;& button{cursor:pointer}}}.lg\:modal-box{@layer daisyui.l1.l2.l3{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}.lg\:modal-top{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}}}.lg\:modal-middle{@layer daisyui.l1.l2{place-items:center;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}}}.lg\:modal-bottom{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}}}.lg\:modal-start{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1}}}.lg\:modal-end{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1}}}}@media (width>=1280px){.xl\:modal{@layer daisyui.l1.l2.l3{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip;&::backdrop{display:none}&[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}}@layer daisyui.l1.l2{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);& .modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{opacity:0}}}}.xl\:modal-action{@layer daisyui.l1.l2.l3{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}}.xl\:modal-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed}}.xl\:modal-backdrop{@layer daisyui.l1.l2.l3{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid;& button{cursor:pointer}}}.xl\:modal-box{@layer daisyui.l1.l2.l3{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}.xl\:modal-top{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}}}.xl\:modal-middle{@layer daisyui.l1.l2{place-items:center;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}}}.xl\:modal-bottom{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}}}.xl\:modal-start{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1}}}.xl\:modal-end{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1}}}}@media (width>=1536px){.\32 xl\:modal{@layer daisyui.l1.l2.l3{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:overlay .3s allow-discrete, visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip;&::backdrop{display:none}&[popover]{color:inherit;background:0 0;border:0;max-width:none;max-height:none;margin:0;padding:0;inset:0;&::backdrop{background-color:oklch(0% 0 0/.4);transition:background-color .3s ease-out}}}@layer daisyui.l1.l2{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4);& .modal-box{opacity:1;translate:0;scale:1}:root:has(&){--page-scroll-lock: }}@starting-style{&.modal-open,&[open],&:popover-open,&:target,.modal-toggle:checked+&{opacity:0}}}}.\32 xl\:modal-action{@layer daisyui.l1.l2.l3{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}}.\32 xl\:modal-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed}}.\32 xl\:modal-backdrop{@layer daisyui.l1.l2.l3{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid;& button{cursor:pointer}}}.\32 xl\:modal-box{@layer daisyui.l1.l2.l3{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}}.\32 xl\:modal-top{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 -100%;scale:1}}}.\32 xl\:modal-middle{@layer daisyui.l1.l2{place-items:center;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:var(--radius-box);--modal-br:var(--radius-box);width:91.6667%;max-width:32rem;height:auto;max-height:calc(100vh - 5em);translate:0 2%;scale:.98}}}.\32 xl\:modal-bottom{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}}}.\32 xl\:modal-start{@layer daisyui.l1.l2{place-items:start;& .modal-box{--modal-tl:0;--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:var(--radius-box);width:auto;max-width:none;height:100vh;max-height:none;translate:-100%;scale:1}}}.\32 xl\:modal-end{@layer daisyui.l1.l2{place-items:end;& .modal-box{--modal-tl:var(--radius-box);--modal-tr:0;--modal-bl:var(--radius-box);--modal-br:0;width:auto;max-width:none;height:100vh;max-height:none;translate:100%;scale:1}}}}}