.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:flex-start;z-index:1000;transition:background .3s ease-out}.modal-content{background:#fff;border-radius:8px;padding:20px 30px;width:90%;max-width:450px;position:fixed;transition:transform .3s ease-out}.fade-in{background:rgba(0,0,0,.5)}.fade-out{background:transparent}.slide-up{transform:translateY(-100vh);animation:slideUp .3s ease-out forwards}.slide-down{transform:translateY(110px);animation:slideDown .3s ease-out forwards}@keyframes slideUp{0%{transform:translateY(100vh)}to{transform:translateY(110px)}}@keyframes slideDown{0%{transform:translateY(110px)}to{transform:translateY(100vh)}}@keyframes fadeIn{0%{background:transparent}to{background:rgba(0,0,0,.5)}}@keyframes fadeOut{0%{background:rgba(0,0,0,.5)}to{background:transparent}}.ticket2{position:relative;display:flex;flex-direction:column;width:400px;filter:drop-shadow(0 0 3px rgba(0,0,0,.15));.ticket2__header{position:relative;background-color:#fff;padding:1rem 1rem 10px;font-weight:600;border-radius:10px 10px 0 0;height:80px;&:after{position:absolute;content:"";height:1px;border-top:1px dashed #3899fe;left:12px;right:12px;bottom:-10px;z-index:2}}.ticket2__rip{position:relative;height:20px;flex-shrink:0;margin:0 20px;background-color:#fff;&:after,&:before{position:absolute;content:"";width:40px;height:40px;border-color:#fff #fff transparent transparent;border-style:solid;border-width:10px;transform:translate(-50%,-50%) rotate(45deg);border-radius:50%;top:50%}&:before{left:-18px}&:after{right:-57px;transform:translate(-50%,-50%) rotate(225deg)}}.ticket2__body{background-color:#fff;padding:0 1rem 1rem;border-radius:0 0 10px 10px}}