.modal{background-color:var(--surface-background);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);box-shadow:0 4px 8px rgba(0,0,0,.1);border-radius:var(--base-radius-half);display:flex;align-items:flex-start;z-index:150;opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out;visibility:hidden}.modal.active{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;max-width:100vw}.modal.mobile{transform:none;transform:translateY(100%);position:fixed;width:100vw;max-height:calc(100vh - var(--toolbar-height));border-radius:0;bottom:var(--toolbar-height);left:0;top:auto;right:0;border-top-left-radius:var(--base-radius-half);border-top-right-radius:var(--base-radius-half);border-bottom-left-radius:0;border-bottom-right-radius:0}.modal.mobile.active{transform:translate(0)}.modal .modal-header,.modal .modal-wrapper{transition:all .4s ease-in-out}.modal .modal-header{align-items:center;background-color:var(--surface-foreground);border-bottom-style:solid;border-bottom-width:1px;border-color:var(--border-color);border-radius:var(--base-radius-half) var(--base-radius-half) var(--base-radius-none) var(--base-radius-none);display:flex;justify-content:space-between;gap:16px;height:var(--modal-header-height);justify-content:center;padding:var(--modal-header-padding-top) 16px var(--modal-header-padding-bottom);width:100%}.modal .modal-header.mobile{gap:12px}.modal .modal-header.mobile .modal-title{white-space:wrap}.modal .modal-header .modal-title{color:var(--text-h1);flex:1 1;white-space:nowwrap;text-wrap:nowrap}.modal .modal-header .close-btn{color:var(--icon-secondary);margin-top:4px;margin-left:8px}.modal .modal-header .close-btn:hover{color:var(--icon-primary)}.modal .modal-header .info-btn:first-child{margin-left:16px}.modal .modal-wrapper{width:min-content;background-color:var(--surface-foreground);padding:16px;border-radius:var(--base-radius-half)}.modal .modal-wrapper.mobile{padding:16px 0 0;width:100%;height:100%;max-height:calc(100vh - var(--toolbar-height));border-bottom-left-radius:0;border-bottom-right-radius:0}.modal .modal-wrapper.mobile .modal-content{max-height:calc(100vh - var(--toolbar-height) - 120px);overflow-y:auto;overflow-x:hidden}.modal .modal-wrapper .modal-content{padding:0 16px;margin-top:20px;margin-bottom:16px}.modal .info .info-title{color:var(--base-color-secondary)}.modal .info .info-text{color:var(--text-paragraph);opacity:.8;-webkit-margin-before:1em;margin-block-start:1em;-webkit-margin-after:1em;margin-block-end:1em;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;overflow:hidden;text-overflow:ellipsis}.modal .info:not(.mobile){border-radius:var(--base-radius-none) var(--base-radius-half) var(--base-radius-half) var(--base-radius-none);transition:width .2s ease-in-out,transform .2s ease-out,opacity .1s ease-out .2s;opacity:0;transform:translateX(100%);width:0}.modal .info:not(.mobile).active{width:300px;max-height:20000px;opacity:1;overflow:auto;visibility:visible;transform:translateX(0)}.modal .info:not(.mobile) .info-container{padding:24px}.modal .info.mobile{position:absolute;overflow:hidden;top:calc(var(--modal-header-height) + var(--modal-header-padding-top));right:0;left:0;max-height:calc(100vh - var(--toolbar-height));border-radius:0;transform:translateY(100%);transition:transform .3s ease-in-out,opacity .3s ease-in-out;padding:0;background-color:var(--surface-foreground);z-index:200;height:auto;opacity:0}.modal .info.mobile.active{transform:translateY(0);opacity:1;padding:16px 16px 72px}.modal .info.mobile.active .info-container{opacity:1}.modal .info.mobile .info-container{opacity:0}.modal .info.mobile .info-container .close-info{width:100%;position:absolute;bottom:32px;right:40px;display:flex;justify-content:flex-end}.modal .info.mobile .info-container .close-btn{height:50px;width:50px;box-shadow:0 4px 8px rgba(0,0,0,.2)}