/* * My-Seedbox Design V3 — shared modal presentation. * * Bootstrap keeps modal nodes in their original view while the backdrop is * appended to . Scope from html.design-v3 so both placements are safe * and the production legacy theme remains unchanged. */ html.design-v3 .modal, html.design-v3 .modal * { box-sizing: border-box; } html.design-v3 .modal { padding-right: 0 !important; padding-left: 0 !important; color: var(--v3-text, #132033); font-family: Inter, "Open Sans", "Segoe UI", Arial, sans-serif; } html.design-v3 .modal .modal-dialog { width: min(620px, calc(100% - 32px)); max-width: calc(100% - 32px); margin: 32px auto; } html.design-v3 .modal .modal-dialog.modal-lg { width: min(900px, calc(100% - 32px)); } /* Renewal is a short form even where the legacy view requests modal-lg. */ html.design-v3 .modal[id^="myModalRenew"] .modal-dialog { width: min(620px, calc(100% - 32px)); } html.design-v3 .modal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow: hidden; border: 1px solid var(--v3-border, #dce4ed); border-radius: 16px; background: var(--v3-white, #ffffff); box-shadow: 0 24px 64px rgba(8, 17, 31, 0.28); } html.design-v3 .modal .modal-header, html.design-v3 .modal .modal-footer { flex: 0 0 auto; background: #f9fbfd; } html.design-v3 .modal .modal-header { position: relative; padding: 19px 64px 18px 22px; border-bottom: 1px solid var(--v3-border, #dce4ed); border-radius: 15px 15px 0 0; } html.design-v3 .modal .modal-title { margin: 0; color: var(--v3-text, #132033); font-size: 20px; font-weight: 750; line-height: 1.35; text-transform: none; } html.design-v3 .modal .modal-title::before, html.design-v3 .modal .modal-title::after { display: none; content: none; } html.design-v3 .modal .modal-header .close { position: absolute; top: 13px; right: 16px; float: none; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--v3-text, #132033); font-size: 26px; line-height: 36px; text-align: center; opacity: 0.72; } html.design-v3 .modal .modal-header .close:hover, html.design-v3 .modal .modal-header .close:focus, html.design-v3 .modal .modal-header .close:focus-visible { background: #e9eef4; color: var(--v3-navy-950, #08111f); opacity: 1; } html.design-v3 .modal .modal-header .close:focus, html.design-v3 .modal .modal-header .close:focus-visible, html.design-v3 .modal select:focus, html.design-v3 .modal select:focus-visible, html.design-v3 .modal input:focus, html.design-v3 .modal input:focus-visible, html.design-v3 .modal textarea:focus, html.design-v3 .modal textarea:focus-visible, html.design-v3 .modal button:focus, html.design-v3 .modal button:focus-visible, html.design-v3 .modal a:focus, html.design-v3 .modal a:focus-visible { outline: 3px solid var(--v3-blue, #2f80ed); outline-offset: 2px; } html.design-v3 .modal .modal-body { flex: 1 1 auto; min-width: 0; min-height: 0; max-height: none; padding: 22px; overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; color: var(--v3-text, #132033); font-size: 14px; line-height: 1.55; } html.design-v3 .modal .modal-body > :first-child { margin-top: 0; } html.design-v3 .modal .modal-body > :last-child { margin-bottom: 0; } html.design-v3 .modal .modal-body .headline h2, html.design-v3 .modal .modal-body .headline h3, html.design-v3 .modal .modal-body > h2 { font-size: 18px !important; line-height: 1.4; } html.design-v3 .modal .modal-body .headline h4, html.design-v3 .modal .modal-body > h3, html.design-v3 .modal .modal-body > h4 { font-size: 16px !important; line-height: 1.45; } html.design-v3 .modal .modal-body p, html.design-v3 .modal .modal-body dl, html.design-v3 .modal .modal-body table { font-size: 14px !important; } html.design-v3 .modal .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--v3-border, #dce4ed); border-radius: 0 0 15px 15px; } html.design-v3 .modal .modal-footer::before, html.design-v3 .modal .modal-footer::after { display: none; content: none; } html.design-v3 .modal .modal-footer .btn, html.design-v3 .modal .modal-footer .btn-u, html.design-v3 .modal .modal-footer button { min-width: 104px; min-height: 42px; margin: 0 !important; padding: 10px 16px; border-radius: 9px; line-height: 1.4; } html.design-v3 .modal .modal-footer .btn-u-default, html.design-v3 .modal .modal-footer .btn-default { border: 1px solid var(--v3-border-strong, #b8c5d3) !important; background: var(--v3-white, #ffffff) !important; color: var(--v3-text, #132033) !important; } html.design-v3 .modal .modal-footer .btn-u-default:hover, html.design-v3 .modal .modal-footer .btn-u-default:focus, html.design-v3 .modal .modal-footer .btn-default:hover, html.design-v3 .modal .modal-footer .btn-default:focus { border-color: #9cabbc !important; background: #eef3f7 !important; color: var(--v3-navy-950, #08111f) !important; } html.design-v3 .modal form, html.design-v3 .modal .row, html.design-v3 .modal [class*="col-"] { min-width: 0; } /* Several legacy views put body and footer inside a form. Keep that * intermediate element in the same bounded flex flow as modal-content so a * short viewport scrolls the body instead of pushing the footer off-screen. */ html.design-v3 .modal .modal-content > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } html.design-v3 .modal .modal-body .row { margin-right: 0; margin-left: 0; } html.design-v3 .modal input.form-control, html.design-v3 .modal select.form-control, html.design-v3 .modal textarea.form-control { display: block; width: 100%; max-width: 100%; border: 1px solid #cbd6e2; border-radius: 9px; background-color: var(--v3-white, #ffffff); box-shadow: none; color: var(--v3-text, #132033); font: inherit; } html.design-v3 .modal input.form-control, html.design-v3 .modal select.form-control { min-height: 44px; } html.design-v3 .modal textarea.form-control { min-height: 112px; resize: vertical; } /* scripts.js converts every select to a positioned semanticSelect menu. That * menu is clipped by a scrollable modal body. In V3 modals only, keep the * original select (and therefore its name/value/change contract) visible and * hide the presentation clone. */ html.design-v3 .modal .semantic-select-wrapper { position: relative; width: 100%; min-width: 0; max-width: 100%; } html.design-v3 .modal .semantic-select-wrapper > select, html.design-v3 .modal .semantic-select-wrapper > select.hidden { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; visibility: visible !important; width: 100% !important; max-width: 100% !important; min-height: 44px; padding: 9px 34px 9px 12px; clip: auto !important; clip-path: none !important; opacity: 1 !important; appearance: auto; -webkit-appearance: menulist; -moz-appearance: auto; background-image: none; } html.design-v3 .modal .semantic-select-wrapper > .semantic-select { display: none !important; } /* The legacy renewal grid limits the select to one third of a small dialog. */ html.design-v3 .modal[id^="myModalRenew"] .modal-body .row > [class*="col-md-4"] { float: none; width: min(100%, 360px); margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; } html.design-v3 .modal[id^="myModalRenew"] .modal-body h5, html.design-v3 .modal[id^="myModalRenew"] .modal-body p { margin: 0 0 12px !important; padding: 0; font-size: 14px !important; font-weight: 600; line-height: 1.5; } html.design-v3 .modal[id^="myModalRenew"] .modal-body h5 + br, html.design-v3 .modal[id^="myModalRenew"] .modal-body p + br { display: none; } /* Wide upgrade/service tables scroll inside the body, never under the close * control or outside the viewport. */ html.design-v3 .modal .modal-body .table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } html.design-v3 .modal .modal-body .table-wrapper > table { margin-bottom: 0; } html.design-v3 .modal .modal-dialog.modal-lg .table-a, html.design-v3 .modal .modal-dialog.modal-lg table.table { min-width: 680px; } @media (max-width: 700px) { /* Some legacy upgrade/list modals have no responsive wrapper. Make the * table itself the local horizontal scroll surface so its last column * remains reachable without changing the view DOM. */ html.design-v3 .modal .modal-body > table { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } } html.design-v3 .modal .tooltip, html.design-v3 .modal .popover { z-index: 1080; } @media (max-width: 480px) { html.design-v3 .modal .modal-dialog, html.design-v3 .modal .modal-dialog.modal-lg, html.design-v3 .modal[id^="myModalRenew"] .modal-dialog { width: calc(100% - 16px); max-width: calc(100% - 16px); margin: 8px auto; } html.design-v3 .modal .modal-content { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 13px; } html.design-v3 .modal .modal-header { padding: 16px 54px 15px 16px; border-radius: 12px 12px 0 0; } html.design-v3 .modal .modal-title { font-size: 17px; } html.design-v3 .modal .modal-header .close { top: 9px; right: 10px; } html.design-v3 .modal .modal-body { padding: 17px 16px; } html.design-v3 .modal .modal-footer { display: grid; grid-template-columns: minmax(0, 1fr); padding: 13px 16px 15px; border-radius: 0 0 12px 12px; } html.design-v3 .modal .modal-footer .btn, html.design-v3 .modal .modal-footer .btn-u, html.design-v3 .modal .modal-footer button { width: 100%; max-width: 100%; } html.design-v3 .modal[id^="myModalRenew"] .modal-body .row > [class*="col-md-4"] { width: 100%; } } @media (prefers-reduced-motion: reduce) { html.design-v3 .modal.fade .modal-dialog { transition: none; } }