.my-grid { display: inline-grid !important; grid-template-columns: 1fr 1fr !important; } .my-grid-bias { display: inline-grid !important; grid-template-columns: 3fr 1fr !important; } .btn-xl { padding: 50px 100px !important; font-size: 40px !important; border-radius: 30px !important; width: 100% !important; justify-content: center !important; align-items: center !important; } .btn-semixl { padding: 25px 50px !important; font-size: 40px !important; border-radius: 10px !important; width: 100% !important; justify-content: center !important; align-items: center !important; } .parent-img { position: relative; } .img-container { position: relative; width: 1000px; /* Set the width to the same width as the imgback */ height: 200px; /* Set the height to the same height as the imgback */ margin: 0 auto; /* Center the container horizontally */ overflow: hidden; /* Hide any overflowing content (e.g., imgfront) */ } .imgback { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } .imgfront { position: absolute; top: 40%; /* Adjust as needed to vertically center the image */ left: 50%; /* Adjust as needed to horizontally center the image */ transform: translate(-50%, -50%); z-index: 2; } /* Additional styling for the text and other elements if needed */ .display-5 { margin-top: 20px; /* Add some space between the images and the text */ } .red-text { color: red; } .green-text { color: green; } /* Opacity wizard — locked card state */ .card-locked { opacity: 0.45; pointer-events: none; } /* Opacity wizard — Card 2's selectpicker dropdown must render above Card 3 */ #card2-wrapper { position: relative; z-index: 20; } #card3-wrapper { position: relative; } /* Ensure the Select All / Deselect All bar has a solid background */ .bs-actionsbox { background-color: var(--bs-dropdown-bg, var(--mirai-dark, #141B20)); } /* Selectpicker dropdowns mounted to via data-container="body": paint above all stacking contexts (backdrop-filter cards create their own). */ body > .dropdown-menu { z-index: 9999 !important; } /* Custom tooltip — position:fixed so it escapes any overflow/stacking context */ .brio-tooltip { position: fixed; z-index: 9999; background: rgba(0, 0, 0, .85); color: var(--mirai-cyan, #13DCF2); border: 1px solid var(--mirai-magenta, #D91EBA); padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-family: inherit; white-space: nowrap; pointer-events: none; } [data-theme="light"] .brio-tooltip { background: rgba(242, 243, 245, .97); }