.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:#000000b3;opacity:0;pointer-events:none;z-index:-1;top:0;left:0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}.modal[data-ativo=sim]{opacity:1;pointer-events:all;z-index:155}.modal[data-ativo="não"]{transition-delay:150ms}.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"]{max-width:425px}.modal[data-ativo=sim]>section{-webkit-animation:fadeLeft 150ms ease-in;-moz-animation:fadeLeft 150ms ease-in;-o-animation:fadeLeft 150ms ease-in;animation:fadeLeft 150ms ease-in}.modal[data-ativo="não"]>section{transform:translateX(100%);-webkit-animation:fadeRight 150ms ease-in;-moz-animation:fadeRight 150ms ease-in;-o-animation:fadeRight 150ms ease-in;animation:fadeRight 150ms ease-in}.modal>section>header{max-height:130px;height:auto;padding-bottom:10px;padding:20px}.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{-webkit-border-radius:10px;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:#0095ff0f;box-shadow:0 -2px 15px 1px #00467830}.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{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes fadeRight{from{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%}}