.chain-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: 0; z-index: 10; display: none; } .chain-modal .modal-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: 0; background-color: #000000a3; } .chain-modal .modal-content { width: 500px; max-height: 400px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; display: flex; flex-direction: column; } .chain-modal .modal-content.mobile { width: 100vw; } .chain-modal .modal-content .modal-title { background-color: white; color: black; border-radius: 12px 12px 0 0; padding: 15px 20px; border-bottom: 1px solid rgba(195, 195, 195, 0.14); } .chain-modal .modal-content .chain-modal-card { background-color: white; transition: background-color 0.2s ease-in-out 0s; display: flex; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; padding: 24px 16px; text-align: center; cursor: pointer; } .chain-modal .modal-content .chain-modal-card:first-child { border-radius: 12px 12px 0 0; } .chain-modal .modal-content .chain-modal-card:not(:first-child) { border-top: 1px solid rgba(195, 195, 195, 0.14); } .chain-modal .modal-content .chain-modal-card:last-child { border-radius: 0 0 12px 12px; } .chain-modal .modal-content .chain-modal-card .icon { width: 45px; height: 45px; display: flex; border-radius: 50%; overflow: visible; box-shadow: none; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .chain-modal .modal-content .chain-modal-card .icon img { width: 100%; height: 100%; } .chain-modal .modal-content .chain-modal-card .icon .icon-svg { width: 100%; height: 100%; fill: currentColor; color: unset; stroke: none; } .chain-modal .modal-content .chain-modal-card .name { width: 100%; font-size: 24px; font-weight: 700; margin-top: 0.5em; color: #0c0c0d; } .chain-modal .modal-content .chain-modal-card .desc { width: 100%; font-size: 18px; margin: 0.333em 0px; color: #a9a9bc; }