// Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same .bootbox.modal { top: 50%; left: 50%; width: 610px; margin: -250px 0 0 -305px; .cancel { margin-left: 1em; } } .modal.in { animation: fade 0.25s; } .modal-footer .btn.right { float: right; } .modal-header { h3 { font-size: var(--font-up-3); } } .close { font-size: var(--font-up-3); text-decoration: none; &:visited { color: var(--primary-high); } cursor: pointer; &:hover { color: var(--primary); } } .modal { .category-chooser { width: 50%; } .modal-body.insert-link { input { min-width: 450px; } } } .choose-topic-modal { .modal-body { position: relative; height: 350px; } #choosing-topic { // prevents content from moving when user selects different move options 525px // is the same width we set on category edit modal width: 525px; p { margin-top: 0; } .radios { margin-bottom: 10px; display: flex; flex-direction: row; .radio-label { display: inline-block; padding-right: 15px; } } button { margin-top: 10px; display: block; width: 300px; } form { width: 95%; margin-top: 20px; .participant-selector { width: 100%; } div.ac-wrap { width: 100%; margin-bottom: 9px; } } } } .change-post-notice-modal { .modal-body { min-width: 450px; } } .create-invite-modal, .create-invite-bulk-modal, .share-topic-modal { .title { align-items: center; display: flex; .subtitle { margin-left: 0.5em; } } &.modal .modal-body { margin: 1em; padding: unset; } .modal-inner-container { width: 40em; // scale with user font-size max-width: 100vw; // prevent overflow if user font-size is enormous } } .json-editor-btn-delete { @extend .btn-danger !optional; @extend .no-text !optional; }