/** * Bootstrap component stand-ins -- loaded in "grid" asset mode only. * * In grid mode the plugin loads bootstrap-grid.min.css (grid + flex + spacing * utilities, no Reboot) instead of the full Bootstrap stylesheet, so Bootstrap's * global element resets can't leak out of the calculator and restyle the * Elementor header, footer or typography on the page. * * bootstrap-grid.css does NOT ship buttons, badges, forms, alerts, modals or the * text-align/width utilities the client markup uses, so they are provided here, * scoped to the calculator (.tfo-pricing-app) and to the program-info modal * (#ppi, which Bootstrap's JS relocates to ). * * Switch to "full" mode in Settings -> TFO Pricing if you would rather load the * complete Bootstrap 5.0.2 stylesheet. */ /* --- Utilities missing from bootstrap-grid ------------------------------- */ .tfo-pricing-app .text-center, .tfo-pricing-modal .text-center { text-align: center !important; } .tfo-pricing-modal .float-end { float: right !important; } .tfo-pricing-app .text-end { text-align: right !important; } .tfo-pricing-app .text-start { text-align: left !important; } .tfo-pricing-app .w-100 { width: 100% !important; } .tfo-pricing-app .w-25 { width: 25% !important; } .tfo-pricing-app .mx-auto { margin-left: auto !important; margin-right: auto !important; } /* --- Buttons ------------------------------------------------------------- */ .tfo-pricing-app .btn, .tfo-pricing-modal .btn, #ppi .btn { display: inline-block; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 10px 20px; font-size: 1rem; border-radius: 4px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .tfo-pricing-app .btn-light, .tfo-pricing-modal .btn-light, #ppi .btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } .tfo-pricing-app .btn-primary, .tfo-pricing-modal .btn-primary, #ppi .btn-primary { color: #f7f3ee; background-color: var(--e-global-color-accent, #ff7d03); border-color: var(--e-global-color-accent, #ff7d03); } .tfo-pricing-app .btn-primary:hover, .tfo-pricing-modal .btn-primary:hover, #ppi .btn-primary:hover { color: #fff; background-color: var(--e-global-color-primary, #21004a); border-color: var(--e-global-color-primary, #21004a); } .tfo-pricing-modal .btn-close, #ppi .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: 4px; opacity: 0.5; cursor: pointer; } /* * The factsheet modal's close button carries an inline