.modal{display:flex;justify-content:flex-end;align-items:center;position:fixed;width:100%;min-height:100vh;min-height:-webkit-fill-available;height:100%;background-color:rgba(0,0,0,.7019607843137254);opacity:0;pointer-events:none;z-index:-1;top:0;left:0;transition:all .3s ease}.modal[data-ativo=true]{opacity:1;pointer-events:all;z-index:155}.modal[data-ativo=false]{transition-delay:.15s}.modal>section{position:relative;width:100%;height:100%;background-color:#fff;display:flex;flex-direction:column}.modal>section[data-size="3"]{max-width:1280px}.modal>section[data-size="2"]{max-width:768px}.modal>section[data-size="1.5"]{max-width:560px}.modal>section[data-size="1"]{max-width:425px}.modal[data-ativo=true]>section{animation:fadeLeft .15s ease-in}.modal[data-ativo=false]>section{transform:translateX(100%);animation:fadeRight .15s ease-in}.modal>section>header{height:auto;padding:20px;color:#fff}.modal>section>div{height:100%;width:100%;position:relative}.modal>section>div:first-of-type{overflow-y:auto;padding:20px;font-size:15px;display:flex;flex-direction:column}.modal>section>div:first-of-type::-webkit-scrollbar{width:6px;cursor:pointer;background-color:#f4f4f4;border-radius:10px;border:1px solid #dee2e6}.modal>section>div:first-of-type::-webkit-scrollbar-thumb{border-radius:10px;background:#0098da;box-shadow:0 .125rem .25rem rgba(0,0,0,.075);-webkit-box-shadow:inset 0 0 6px #00a5e7}.modal>section>div:last-of-type{display:flex;justify-content:flex-end;height:auto;padding:15px;background-color:rgba(0,149,255,.058823529411764705);box-shadow:0 -2px 15px 1px rgba(0,70,120,.18823529411764706)}.modal>section>div:last-of-type .button:not(:last-of-type){margin-right:.5rem}.modal>section>button{position:absolute;right:0;top:0;padding:1rem}@keyframes fadeLeft{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes fadeRight{0%{transform:translateX(0)}to{transform:translateX(100%)}}@media only screen and (max-width:475px){.modal>section{width:90%}.modal>section>header>article>h1{font-size:22px}.modal>section>div:first-of-type{font-size:14px}.modal>section>div:last-of-type{flex-direction:column;padding:10px}.modal>section>div:last-of-type .button{width:100%}.modal>section>div:last-of-type .button:not(:last-of-type){margin-right:0;margin-bottom:.5rem}}@media only screen and (max-width:375px){.modal>section{width:100%}}