react-modal-vz/build/styles.css

React modal, show quick modal

body.modal2-open{overflow:hidden}@media screen and (max-width:767px){.modal2 .modal2-container{width:100%!important}.modal2 .modal2-container .button-full-width-mobile{flex-direction:column-reverse}.modal2 .modal2-container .button-full-width-mobile button.modal2-button{width:100%;min-height:40px}}@media screen and (max-width:576px){.modal2 .modal2-container{max-width:500px}.modal2 .modal2-container .button-full-width-mobile{flex-direction:column-reverse}.modal2 .modal2-container .button-full-width-mobile button.modal2-button{width:100%;min-height:40px}}@-webkit-keyframes modal2-fadeIn{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes modal2-fadeIn{0%{transform:scale(0)}to{transform:scale(1)}}.portal-modal2{position:static;z-index:-1;width:100%;height:100%}.modal2{position:fixed;width:100%;height:100%;top:0;left:0;inset:0;display:flex;z-index:1080;flex-direction:column;align-items:center;transition:all .3s ease-in-out;overflow:hidden;padding:2rem 16px;margin:auto}.modal2.modal2-center{justify-content:center}.modal2.modal2-bottom{justify-content:flex-end!important}.modal2.modal2-toggle{padding:0}.modal2 .modal2-backdrop{position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;inset:0;background-color:hsla(0,0%,100%,.8)}.modal2 .modal2-backdrop.modal2-backdrop-dark{background-color:rgba(0,0,0,.6)}.modal2 .modal2-backdrop.modal2-backdrop-dark .modal2-container{box-shadow:0 3px 10px hsla(0,0%,100%,.65)}.modal2 .modal2-container{position:relative;border-radius:12px;width:640px;overscroll-behavior:contain;background-color:#fff;color:#000;font-size:1rem;padding-bottom:8px;box-shadow:0 3px 10px rgba(0,0,0,.3)}.modal2 .modal2-container .modal2-context{display:flex;flex-direction:column;max-height:640px}.modal2 .modal2-container .modal2-context.moda2-context-fit-height{max-height:calc(100vh - 64px)}.modal2 .modal2-container.modal2-animation{-webkit-animation-name:modal2-fadeIn;-webkit-animation-duration:.6s;animation-name:modal2-fadeIn;animation-duration:.6s}.modal2 .modal2-container .modal2-header{position:relative;display:flex;align-items:flex-start;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:1rem 50px 1rem 2rem;min-height:64px}.modal2 .modal2-container .modal2-header.split-border{border-bottom:.65px solid #e9ecef}.modal2 .modal2-container .modal2-header .modal2-title{font-size:1.5rem;font-weight:500}.modal2 .modal2-container .modal2-header .modal2-title.modal2-title-toggle{cursor:pointer;user-select:none}@media screen and (max-width:767px){.modal2 .modal2-container .modal2-header{padding:1rem 50px 1rem 1rem}}.modal2 .modal2-container .modal2-body{flex:1 1 auto;padding:1rem;margin:.5rem 0 .5rem 1rem;overflow:auto;min-height:120px}@media screen and (max-width:767px){.modal2 .modal2-container .modal2-body{margin:0}}.modal2 .modal2-container .modal2-footer{display:flex;align-items:center;justify-content:flex-end;padding:1rem;gap:12px}.modal2 .modal2-container .modal2-footer.split-border{border-top:.65px solid #e9ecef}.modal2 .modal2-container .modal2-footer.align-center{justify-content:center}.modal2 .modal2-container .modal2-footer.align-left{justify-content:flex-start}.modal2 .modal2-container .modal2-close{position:absolute;width:40px;height:40px;background-color:transparent;border:0;cursor:pointer;top:1rem;right:8px;font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1;opacity:.5}.modal2 .modal2-container .modal2-close:focus,.modal2 .modal2-container .modal2-close:hover{text-decoration:none;opacity:.75}.modal2 .modal2-container button.modal2-button{display:inline-block;min-width:60px;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;cursor:pointer;border:1.5px solid transparent;padding:.375rem 1.5rem;font-size:1rem;line-height:1.5;border-radius:.5rem;text-transform:uppercase}.modal2 .modal2-container button.modal2-button.modal2-primary-button{color:#fff;background-color:#007bff;border-color:#007bff}.modal2 .modal2-container button.modal2-button.modal2-primary-button:hover{background-color:#0069d9;border-color:#0062cc}.modal2 .modal2-container button.modal2-button.modal2-secondary-button{color:#fff;background-color:#6c757d;border-color:#6c757d}.modal2 .modal2-container button.modal2-button.modal2-secondary-button:hover{background-color:#5a6268;border-color:#545b62}.modal2 .modal2-container button.modal2-button.modal2-danger-button{color:#fff;background-color:#dc3545;border-color:#dc3545}.modal2 .modal2-container button.modal2-button.modal2-danger-button:hover{background-color:#c82333;border-color:#bd2130}.modal2 .modal2-container button.modal2-button.modal2-light-button{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.modal2 .modal2-container button.modal2-button.modal2-light-button:hover{background-color:#e2e6ea;border-color:#dae0e5}.modal2 .modal2-container button.modal2-button:hover{border:2px solid transparent}.modal2.modal2-toggle .modal2-container{width:100%;height:100%}.modal2.modal2-toggle .modal2-context{width:100%;height:100%;max-width:100%;max-height:100%;margin:0}