.modal{display:flex;position:fixed;top:0;width:100%;height:100%;justify-content:center;align-items:center;z-index:99999}[dir] .modal{background:rgba(0,0,0,.25)}[dir=ltr] .modal{left:0}[dir=rtl] .modal{right:0}.modal-container{display:flex;position:relative;max-width:540px;width:100%;height:80%;justify-content:center;align-items:center}[dir] .modal-container{margin:0 16px}.modal-content{width:100%;height:100%}[dir] .modal-content{background:#fff;padding:0 30px}.close-btn{position:absolute;top:7px;width:24px;height:24px;z-index:99}[dir] .close-btn{background-color:hsla(0,0%,100%,.8);border:0;border-radius:50%;cursor:pointer;transition:background .35s ease-in-out}[dir=ltr] .close-btn{right:7px}[dir=rtl] .close-btn{left:7px}.close-btn:before{position:absolute;top:5px;content:"";height:14px;width:3px}[dir] .close-btn:before{background-color:#000}[dir=ltr] .close-btn:before{right:10px;transform:rotate(45deg)}[dir=rtl] .close-btn:before{left:10px;transform:rotate(-45deg)}.close-btn:after{position:absolute;top:5px;content:"";height:14px;width:3px}[dir] .close-btn:after{background-color:#000}[dir=ltr] .close-btn:after{right:10px;transform:rotate(-45deg)}[dir=rtl] .close-btn:after{left:10px;transform:rotate(45deg)}