@charset "UTF-8"; /* =================================== Display ====================================== */ /* TODO - Enable 'proper' reference when files are available $flask-fill-svg: $blob-host + $blob-path + 'flask-fill.svg'; $flask-svg: $blob-host + $blob-path + 'flask.svg'; */ .nav-item-icon { --nav-icon-size:20px; position: relative; display: block; padding-left: 31px; } .nav-item-icon::before { content: ""; display: block; width: var(--nav-icon-size); height: var(--nav-icon-size); position: absolute; top: 1px; left: 0; line-height: 1; mask-size: var(--nav-icon-size), var(--nav-icon-size); mask-repeat: no-repeat; mask-position: center; background-color: currentColor; } .bi::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; line-height: 1; mask-size: auto; mask-repeat: no-repeat; mask-position: center; background-color: currentColor; vertical-align: -0.125em; } .bi-arrow-clockwise::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/arrow-clockwise.svg) !important; } .bi-bookmark::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/bookmark.svg) !important; } .bi-bookmark-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/bookmark-fill.svg) !important; } .bi-box-arrow-left::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/box-arrow-left.svg) !important; } .bi-broadcast-pin::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/broadcast-pin.svg) !important; } .bi-browser-chrome::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/browser-chrome.svg) !important; } .bi-brush::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/brush.svg) !important; } .bi-cart-check::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cart-check.svg) !important; } .bi-cash-coin::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cash-coin.svg) !important; } .bi-check-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/check-circle.svg) !important; } .bi-check-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/check-circle-fill.svg) !important; } .bi-chevron-double-left::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-double-left.svg) !important; } .bi-chevron-double-right::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-double-right.svg) !important; } .bi-chevron-down::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-down.svg) !important; } .bi-chevron-left::before { mask-image: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%3E%3Cpath%20d%3D%22m6.51%2C12.87c.16%2C0%2C.33-.06.45-.18.26-.25.27-.66.02-.92L1.91%2C6.5%2C6.97%2C1.46c.25-.25.25-.67%2C0-.92-.25-.25-.67-.26-.92%2C0L.54%2C6.03c-.25.25-.25.66%2C0%2C.91l5.52%2C5.73c.13.13.3.2.47.2Z%22%20style%3D%22fill%3A%230c2433%3B%22/%3E%3C/svg%3E) !important; } .bi-chevron-right::before { mask-image: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22m1%2C12.87c-.16%2C0-.33-.06-.45-.18-.26-.25-.27-.66-.02-.92l5.07-5.27L.54%2C1.46c-.25-.25-.25-.67%2C0-.92.25-.25.67-.26.92%2C0l5.52%2C5.49c.25.25.25.66%2C0%2C.91L1.47%2C12.67c-.13.13-.3.2-.47.2Z%22%20style%3D%22fill%3A%230c2433%3B%22/%3E%0A%3C/svg%3E) !important; } .bi-chevron-up::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-up.svg) !important; } .bi-clock-history::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/clock-history.svg) !important; } .bi-cloud-arrow-down::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cloud-arrow-down.svg) !important; } .bi-cloud-download::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cloud-download.svg) !important; } .bi-copy::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/copy.svg) !important; } .bi-credit-card::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/credit-card.svg) !important; } .bi-credit-card-2-front::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/credit-card-2-front.svg) !important; } .bi-dash-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/dash-circle.svg) !important; } .bi-dash-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/dash-circle-fill.svg) !important; } .bi-download::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/download.svg) !important; } .bi-envelope::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/envelope.svg) !important; } .bi-envelope-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/envelope-fill.svg) !important; } .bi-exclamation-octagon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-octagon.svg) !important; } .bi-exclamation-octagon-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-octagon-fill.svg) !important; } .bi-exclamation-triangle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-triangle.svg) !important; } .bi-exclamation-triangle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-triangle-fill.svg) !important; } .bi-fast-forward::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/fast-forward.svg) !important; } .bi-file-earmark::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark.svg) !important; } .bi-file-earmark-arrow-down::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-arrow-down.svg) !important; } .bi-file-earmark-excel::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-excel.svg) !important; } .bi-file-earmark-excel-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-excel-fill.svg) !important; } .bi-file-earmark-pdf::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-pdf.svg) !important; } .bi-file-earmark-pdf-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-pdf-fill.svg) !important; } .bi-file-earmark-spreadsheet::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-spreadsheet.svg) !important; } .bi-file-earmark-spreadsheet-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-spreadsheet-fill.svg) !important; } .bi-flask::before { mask-image: url(https://sfvideo.blob.core.windows.net/sitefinity/images/default-source/site-design/icons/flask.svg) !important; } .bi-flask-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/sitefinity/images/default-source/site-design/icons/flask-fill.svg) !important; } .bi-gear::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/gear.svg) !important; } .bi-gear-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/gear-fill.svg) !important; } .bi-geo-alt::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/geo-alt.svg) !important; } .bi-geo-alt-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/geo-alt-fill.svg) !important; } .bi-info-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle.svg) !important; } .bi-info-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg) !important; } .bi-key::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/key.svg) !important; } .bi-life-preserver::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/life-preserver.svg) !important; } .bi-lock::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/lock.svg) !important; } .bi-person::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/person.svg) !important; } .bi-person-rolodex::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/person-rolodex.svg) !important; } .bi-plus-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/plus-circle.svg) !important; } .bi-plus-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/plus-circle-fill.svg) !important; } .bi-processing-spinner::before { mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJtMTYuMjcsMTIuMzVjLTEuMjUsMy4yOS00Ljk3LDUuMjItOC42MywzLjg3LTIuMzQtLjg2LTMuOTctMi44OS00LjI1LTUuMzctLjQ2LTMuOTYsMi4zNS03LjExLDUuODQtNy41My43Ny0uMDksMS4zNS0uNzUsMS40MS0xLjUzaDBjLjA4LTEuMDctLjg1LTEuOTItMS45MS0xLjc5LTIuMTMuMjctNC4yLDEuMjQtNS44NywyLjkyQy0uNDIsNi4yNi0uOTUsMTEuNTksMS42NCwxNS40OGMzLjM3LDUuMDcsMTAuMjcsNS45OCwxNC44MiwyLjE5LDEuMzQtMS4xMiwyLjMxLTIuNTEsMi45MS00LjAzLjM5LS45OS0uMjItMi4xLTEuMjctMi4yOGgwYy0uNzYtLjEzLTEuNTUuMjYtMS44Mi45OVoiLz48L3N2Zz4=) !important; } .bi-question-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/question-circle.svg) !important; } .bi-question-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/question-circle-fill.svg) !important; } .bi-receipt-cutoff::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/receipt-cutoff.svg) !important; } .bi-repeat::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/repeat.svg) !important; } .bi-reply-all::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/reply-all.svg) !important; } .bi-rewind::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/rewind.svg) !important; } .bi-rulers::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/rulers.svg) !important; } .bi-search::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/search.svg) !important; } .bi-tag::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/tag.svg) !important; } .bi-tools::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/tools.svg) !important; } .bi-trash::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/trash.svg) !important; } .bi-upload::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/upload.svg) !important; } .bi-wallet::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/wallet.svg) !important; } .bi-x-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-circle.svg) !important; } .bi-x-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-circle-fill.svg) !important; } .bi-x-octagon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-octagon.svg) !important; } .bi-x-octagon-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-octagon-fill.svg) !important; } .bi-processing-spinner::before { mask-size: contain; animation: 0.75s linear infinite spinner-border; } /* 2025 brand colors, sync with Wordpress\wp-content\sass\src\_colors.scss */ :root { --black: #000000; --white: #FFFFFF; --gray: #595959; --gray-hover: #F1F1F1; --transparent: rgba(255,255,255,0); --hit-box: var(--transparent); --bio-strand: var(--bio-strand-500); --gene-strand: var(--gene-strand-500); --genome-mist: var(--genome-mist-500); --helix-feather: var(--helix-feather-500); --membrane-gray: var(--membrane-grey-500); --bio-orchid: var(--bio-orchid-500); --bio-orchid-100: #DBD0EC; --bio-orchid-200: #B8A1D8; --bio-orchid-300: #9471C5; --bio-orchid-400: #7142B1; --bio-orchid-500: #4D139E; --bio-orchid-600: #3E0F7E; --bio-orchid-700: #2E0B5F; --bio-orchid-800: #1F083F; --bio-orchid-900: #0F0420; --bio-strand-100: #FAFAFD; --bio-strand-200: #F6F4FB; --bio-strand-300: #F1EFF8; --bio-strand-400: #EDE9F6; --bio-strand-500: #E8E4F4; --bio-strand-600: #BAB6C3; --bio-strand-700: #8B8992; --bio-strand-800: #5D5B62; --bio-strand-900: #2E2E31; --cellular-proteins: var(--cellular-proteins-500); --cellular-proteins-100: #F3EFFF; --cellular-proteins-100-rgb: rgb(243, 239, 255); --cellular-proteins-200: #E8DEFF; --cellular-proteins-300: #DCCEFF; --cellular-proteins-400: #D1BDFF; --cellular-proteins-500: #C5ADFF; --cellular-proteins-600: #9E8ACC; --cellular-proteins-700: #766899; --cellular-proteins-800: #4F4566; --cellular-proteins-900: #272333; --crispr-clear: var(--crispr-clear-500); --crispr-clear-100: #CCF0FF; --crispr-clear-100-rgb: rgb(204, 240, 255); --crispr-clear-200: #99E1FF; --crispr-clear-300: #67D1FF; --crispr-clear-400: #34C2FF; --crispr-clear-500: #01B3FF; --crispr-clear-600: #018FCC; --crispr-clear-700: #016B99; --crispr-clear-800: #004866; --crispr-clear-900: #002433; --cyanotic-blue: var(--cyanotic-bright-500); --cyanotic-bright-100: #CCFFFF; --cyanotic-bright-200: #9AFFFF; --cyanotic-bright-300: #67FFFE; --cyanotic-bright-400: #35FFFE; --cyanotic-bright-500: #02FFFE; --cyanotic-bright-600: #02CCCB; --cyanotic-bright-700: #019998; --cyanotic-bright-800: #016666; --cyanotic-bright-900: #003333; --dark-oligos: var(--dark-oligos-500); --dark-oligos-100: #CED3D6; --dark-oligos-100-rgb: rgb(206, 211, 214); --dark-oligos-200: #9EA7AD; --dark-oligos-300: #6D7C85; --dark-oligos-400: #3D505C; --dark-oligos-500: #0C2433; --dark-oligos-600: #0A1D29; --dark-oligos-700: #07161F; --dark-oligos-800: #050E14; --dark-oligos-900: #02070A; --deep-affinity: var(--deep-affinity-500); --deep-affinity-100: #CCDBE7; --deep-affinity-200: #99B7CF; --deep-affinity-300: #6693B7; --deep-affinity-300-rgb:102, 147, 183; --deep-affinity-400: #336F9F; --deep-affinity-400-rgb:51, 111, 159; --deep-affinity-500: #004B87; --deep-affinity-600: #003C6C; --deep-affinity-700: #002D51; --deep-affinity-800: #001E36; --deep-affinity-900: #000F1B; --gene-strand-100: #E5E5E5; --gene-strand-200: #CCCCCC; --gene-strand-300: #B2B2B2; --gene-strand-400: #999999; --gene-strand-500: #7F7F7F; --gene-strand-600: #666666; --gene-strand-700: #4C4C4C; --gene-strand-800: #333333; --gene-strand-900: #191919; --genetic-iris: var(--genetic-iris-500); --genetic-iris-100: #D0CDD7; --genetic-iris-200: #A29BAF; --genetic-iris-300: #736888; --genetic-iris-400: #453660; --genetic-iris-500: #160438; --genetic-iris-600: #12032D; --genetic-iris-700: #0D0222; --genetic-iris-800: #090216; --genetic-iris-900: #04010B; --genome-mist-100: #FAFCFD; --genome-mist-200: #F5F9FB; --genome-mist-300: #EFF7F8; --genome-mist-400: #EAF4F6; --genome-mist-500: #E5F1F4; --genome-mist-600: #B7C1C3; --genome-mist-700: #899192; --genome-mist-800: #5C6062; --genome-mist-900: #2E3031; --helix-feather-100: #fdfeff; --helix-feather-200: #FBFCFE; --helix-feather-200-rgb:rgb(251, 252, 254); --helix-feather-300: #F9FBFE; --helix-feather-400: #F7F9FD; --helix-feather-500: #F5F8FD; --helix-feather-600: #C4C6CA; --helix-feather-700: #939598; --helix-feather-800: #626365; --helix-feather-900: #313233; --membrane-grey-100: #f5f6f7; --membrane-grey-100-rgb: 245, 246, 247; --membrane-grey-200: #C5C7CC; --membrane-grey-300: #A9ABB2; --membrane-grey-400: #8C8F99; --membrane-grey-500: #6F737F; --membrane-grey-600: #595C66; --membrane-grey-700: #43454C; --membrane-grey-800: #2C2E33; --membrane-grey-900: #161719; --neuron-block: var(--neuron-block-500); --neuron-block-100: #CCE4FF; --neuron-block-100-rgb: 204, 228, 255; --neuron-block-200: #99CAFF; --neuron-block-300: #66AFFF; --neuron-block-400: #3395FF; --neuron-block-500: #007AFF; --neuron-block-600: #0062CC; --neuron-block-700: #004999; --neuron-block-800: #003166; --neuron-block-900: #001833; --plasma-antibody: var(--plasma-antibody-500); --plasma-antibody-100: #DFCCFE; --plasma-antibody-200: #C099FD; --plasma-antibody-300: #A066FB; --plasma-antibody-400: #8133FA; --plasma-antibody-500: #6100F9; --plasma-antibody-600: #4E00C7; --plasma-antibody-700: #3A0095; --plasma-antibody-800: #270064; --plasma-antibody-900: #130032; --rna-lights: var(--rna-lights-500); --rna-lights-100: #E6CCFF; --rna-lights-200: #CD99FF; --rna-lights-300: #B466FF; --rna-lights-400: #9B33FF; --rna-lights-500: #8200FF; --rna-lights-600: #6800CC; --rna-lights-700: #4E0099; --rna-lights-800: #340066; --rna-lights-900: #1A0033; --light-Gray: #E7E7E7; --dark-Purple: #6000FA; --midnight-Blue: #17026F; --dark-Charcoal: #3A3A3A; --bs-link-color: var(--deep-affinity-400); --bs-link-color-rgb: var(--deep-affinity-400-rgb); --bs-link-hover-color-rgb: var(--deep-affinity-300-rgb); --bs-primary-bg-subtle: var(--neuron-block-100); --bs-primary-bg-subtle-rgb: var(--neuron-block-100-rgb); --bs-secondary-bg-subtle: var(--cellular-proteins-100); --bs-secondary-bg-subtle-rgb: var(--cellular-proteins-100-rgb); --bs-success-bg-subtle:#cdede5; --bs-success-bg-subtle-rgb:rgb(205, 237, 229); --bs-danger-bg-subtle:#f6d9db; --bs-danger-bg-subtle-rgb:rgb(246, 217, 219); --bs-warning-bg-subtle:#fff7df; --bs-warning-bg-subtle-rgb:rgb(255, 247, 223); --bs-info-bg-subtle: var(--crispr-clear-100); --bs-info-bg-subtle-rgb:var(--crispr-clear-100-rgb); --bs-light-bg-subtle: var(--helix-feather-200); --bs-light-bg-subtle-rgb: var(--helix-feather-200-rgb); --bs-dark-bg-subtle: var(--dark-oligos-100); --bs-dark-bg-subtle-rgb: var(--dark-oligos-100-rgb); --bs-tertiary-bg-rgb: var(--membrane-grey-100-rgb); --bs-secondary-border-subtle: var(--rna-lights-200); --bs-secondary-text-emphasis: var(--plasma-antibody); --body-text-heading-accent: var(--bio-orchid-600); } test { color: #6693b7; } :root { --alert-border-radius: 0.375rem; } /* =================================== BASE STYLES AND BOOTSTRAP OVERRIDES =================================== */ body { font-family: "Inter", Arial, sans-serif; background: #fff; } img { max-width: 100%; } hr { border-color: #b2b2b2; } p > a:not(.btn), p > a:link:not(.btn), p > strong > a, p > b > a, p + * li > a, td > a:not(.btn) { text-decoration: underline; } .anchor-target { height: 0; display: block; max-height: 0; padding: 0; margin: 0; border: 0; line-height: 0; font-size: 0; } .reveal-content { display: inline-block; visibility: hidden; vertical-align: bottom; overflow: hidden; white-space: nowrap; max-width: 0; } @keyframes reveal-content { from { overflow: hidden; white-space: nowrap; } to { max-width: 500px; overflow: auto; white-space: normal; } } .hover-reveal:hover .reveal-content, .hover-reveal:focus .reveal-content, .hover-reveal:active .reveal-content, .hover-reveal.active .reveal-content, .hover-reveal[aria-expanded=true] .reveal-content { visibility: visible; animation-name: reveal-content; animation-duration: 0.8s; animation-fill-mode: forwards; } /* ================================================= Announcement Strip Styles (Appears at top of page) ==================================================== */ #announcement-strip { font-size: 16px; background-color: rgba(191, 225, 235, 0.9); padding: 25px 0; box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, 0.15); } #announcement-strip h3, #announcement-strip h4 { font-size: 1.3em; } #announcement-strip .close { opacity: 0.5; padding: 0 5px 2px 5px; margin-left: 10px; border: 2px solid #999; border-radius: 300px; } #announcement-strip .close:hover, #announcement-strip .close:focus, #announcement-strip .close:active { color: #fff; background-color: #ff6900; border-color: #ff6900; } #announcement-strip p:last-child { margin-bottom: 0; } /* =========================== Ad server mark-up overwrites ============================== */ #announcement-strip.ad_server_wrapper { padding-bottom: 13px; } .ad_server_wrapper .row { position: relative; } .announcement_content { padding-right: 25px; } .announcement_content .promo_headline, .announcement_content .promo_text, .announcement_content .btn { display: inline-block; vertical-align: bottom; margin-bottom: 12px; margin-right: 7px; } #announcement-strip .promo_headline > h4 { margin: 0; font-size: 1em; line-height: 1.4; font-weight: bold; } .announcement_content .promo_image { display: none; } .announcement_content .promo_text { margin-right: 15px; } .announcement_content .promo_text > p { font-size: 1em; } .announcement_content .btn { padding: 4px 8px; font-size: 12px; line-height: 1.5; } .ad_server_wrapper .close { position: absolute; right: 0; top: 0; } /* ===================================================== Ad Server Banner Ad (full width promo) styles ======================================================== */ .full_width_promo, .banner_ad_promo { background-position: center; background-size: cover; overflow: hidden; } .full_width_promo > *, .banner_ad_promo > * { margin-left: 10px; } .full_width_promo > .promo_text, .full_width_promo > .btn, .banner_ad_promo > .promo_text, .banner_ad_promo > .btn { float: left; } .banner_ad_promo > .promo_headline { margin-bottom: 7px; } .banner_ad_promo > .promo_text { padding-top: 5px; max-width: 630px; } @media only screen and (min-width: 768px) { .banner_ad_promo.promo_wrapper { padding-right: 290px; background-position: right center; } } /* ================================== Loading component ===================================== */ .loading-container { background-color: #fff; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; margin: auto; z-index: 650; display: flex; align-items: center; justify-content: center; } .loading-container-content { text-align: center; } .loading-container-content > * { margin-left: auto; margin-right: auto; } .loading-container.align-top { align-items: flex-start; } .loading-container.align-top .loading-container-content { margin-top: 65px; } .loading-container-content { margin-top: 65px; } .loading-text { margin-top: 15px; text-transform: uppercase; letter-spacing: 0.07em; } /* ================================== Plus/minus squashy toggle ===================================== */ .plus-toggle::before { font-family: "Glyphicons Halflings"; content: "+"; font-size: 10px; position: relative; top: -0.3em; margin-right: 0.3em; } .plus-toggle[aria-expanded=true]::before, .plus-toggle.sf-opened::before { content: "−"; } /* =================================== Extensions ====================================== */ .full-wrapper { background-color: var(--sf-backgrоund-color); } /* ================================================= Supreme wrapper/container styles ==================================================== */ .inner-wrap { margin-left: auto; margin-right: auto; height: 100%; min-height: inherit; max-width: 1400px; padding-left: 0; padding-right: 0; } @media screen and (max-width: 1440px) { .inner-wrap { padding-left: 20px; padding-right: 20px; } } .overflow-scroll { overflow-x: auto; padding-left: 1px; padding-right: 1px; } .max-width-100 { max-width: 100px; } .max-width-200 { max-width: 200px; } .max-width-300 { max-width: 300px; } .max-width-400 { max-width: 400px; } .max-width-500 { max-width: 500px; } .max-width-600 { max-width: 600px; } .max-width-700 { max-width: 700px; } .max-width-800 { max-width: 800px; } .max-width-900 { max-width: 900px; } .table-wrapper { display: table; width: 100%; height: 100%; } .cell-wrapper { display: table-cell; vertical-align: middle; } .preload-images { visibility: hidden; position: fixed; left: -10px; top: -10px; width: 1px; height: 1px; z-index: -9000; } [class*=border-indent-] { --idt-border-indent-width:1px; --idt-border-indent-color:var(--deep-affinity); --idt-border-indent-padding-x:.8rem; border-color: var(--idt-border-indent-color); } .border-indent-start { padding-left: var(--idt-border-indent-padding-x); border-left: var(--idt-border-indent-width) solid; } :root { --alert-border-radius: 0.375rem; } /* ================================================= Helper functions/utilities ==================================================== */ [class*=grid-] { display: grid; } .grid-1 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } @media screen and (min-width: 446px) { .grid-1-xs { grid-template-columns: 1fr; } } @media screen and (min-width: 576px) { .grid-1-sm { grid-template-columns: 1fr; } } @media screen and (min-width: 768px) { .grid-1-md { grid-template-columns: 1fr; } } @media screen and (min-width: 992px) { .grid-1-lg { grid-template-columns: 1fr; } } @media screen and (min-width: 1200px) { .grid-1-xl { grid-template-columns: 1fr; } } @media screen and (min-width: 1400px) { .grid-1-xxl { grid-template-columns: 1fr; } } @media screen and (min-width: 446px) { .grid-2-xs { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 576px) { .grid-2-sm { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 768px) { .grid-2-md { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 992px) { .grid-2-lg { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 1200px) { .grid-2-xl { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 1400px) { .grid-2-xxl { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 446px) { .grid-3-xs { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 576px) { .grid-3-sm { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 768px) { .grid-3-md { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 992px) { .grid-3-lg { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 1200px) { .grid-3-xl { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 1400px) { .grid-3-xxl { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 446px) { .grid-4-xs { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 576px) { .grid-4-sm { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 768px) { .grid-4-md { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 992px) { .grid-4-lg { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 1200px) { .grid-4-xl { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 1400px) { .grid-4-xxl { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 446px) { .grid-5-xs { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 576px) { .grid-5-sm { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 768px) { .grid-5-md { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 992px) { .grid-5-lg { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 1200px) { .grid-5-xl { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 1400px) { .grid-5-xxl { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 446px) { .grid-6-xs { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 576px) { .grid-6-sm { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 768px) { .grid-6-md { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 992px) { .grid-6-lg { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 1200px) { .grid-6-xl { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } @media screen and (min-width: 1400px) { .grid-6-xxl { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } /* ======================================================= Grid system gaps ========================================================== */ [class*=grid-].gap-1 { grid-column-gap: 5px; grid-row-gap: 5px; } [class*=grid-].gap-2 { grid-column-gap: 10px; grid-row-gap: 10px; } [class*=grid-].gap-3 { grid-column-gap: 15px; grid-row-gap: 15px; } [class*=grid-].gap-4 { grid-column-gap: 25px; grid-row-gap: 25px; } [class*=grid-].gap-5 { grid-column-gap: 40px; grid-row-gap: 40px; } /* ========== TYPOGRAPHY ========== */ h1 { color: var(--bio-orchid-600); font-weight: 700; } .gradient-heading { background: linear-gradient(90deg, var(--bio-orchid-600) 0%, var(--crispr-clear-500) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .text-heading-accent { color: var(--body-text-heading-accent); } .disclaimer-text { font-size: 0.8em; color: #888; line-height: 1.3; } .disclaimer-text a, .disclaimer-text a:link { color: #48a9c5; } .disclaimer-text a:hover, .disclaimer-text a:active, .disclaimer-text a:focus { color: #bfe1eb; } .text-300 { font-weight: 300 !important; } .text-700 { font-weight: 700 !important; } .text-900 { font-weight: 900 !important; } /* // Variables for font-size calculations $base-font-size: 1em; // 16px $font-size-step: .35; // The step between each heading size will be compounded by this percentage // Compound font-sizes through heading sizes (increase the font-size of a heading by the last heading size + the font-size step) $h6-font-size:$base-font-size; // 16px $h5-font-size:$base-font-size; // 16px $h4-font-size:$base-font-size + ($base-font-size * $font-size-step); // + 35% from previous heading size $h3-font-size:$h4-font-size + ($h4-font-size * $font-size-step); // + 35% from previous heading size $h2-font-size:$h3-font-size + ($h3-font-size * $font-size-step); // + 35% from previous heading size $h1-font-size:$h2-font-size + ($h2-font-size * $font-size-step); // + 35% from previous heading size // Helper classes to increase/decrease font-size .larger { font-size: calc($base-font-size + ($base-font-size * ($font-size-step/2))); // ~16% larger } .smaller { font-size: calc($base-font-size - ($base-font-size * ($font-size-step/2))); // ~16% smaller } // Reset the weight of several headings to be normal weight h1, h2:not(.lead), h3 { font-family: "Diagramm", "Source Sans Pro", Arial, sans-serif; font-weight:normal; } // Adjust the spacing of icon images for product-titles .product_title img { margin-top:13px; } // H1 h1, .product_title h1 { font-size:$h1-font-size; } // H1 larger styles h1.larger, .product_title h1.larger { font-size: calc($h1-font-size + (($h1-font-size - $h2-font-size)/2)); } // H1 smaller styles h1.smaller, .product_title h1.smaller { font-size: calc($h1-font-size - (($h1-font-size - $h2-font-size)/2)); } // "lead" styles following H1 h1+.lead, .product_title +.lead { margin-top:-11px; font-size:25px; } // H2 h2:not(.lead) { font-size: $h2-font-size; line-height:1.1; } // H2 larger styles h2.larger:not(.lead) { font-size: calc($h2-font-size + (($h2-font-size - $h3-font-size)/2)); } // H2 smaller styles h2.smaller:not(.lead) { font-size: calc($h2-font-size - (($h2-font-size - $h3-font-size)/2)); } // H3 h3 { font-size:$h3-font-size; line-height:1.2; } // H3 larger styles h3.larger { font-size: calc($h3-font-size + (($h3-font-size - $h4-font-size)/2)); } // H3 smaller styles h3.smaller { font-size: calc($h3-font-size - (($h3-font-size - $h4-font-size)/2)); } // H4 h4 { font-size:$h4-font-size; line-height:1.4; margin:0 0 2px 0; } // H4 larger styles h4.larger { font-size: calc($h4-font-size + (($h3-font-size - $h4-font-size)/2)); } // H4 smaller styles h4.smaller { font-size: calc($h4-font-size - (($h3-font-size - $h4-font-size)/2)); } // H5 h5 { font-size:$h5-font-size; margin:0 0 2px 0; } // H5 larger styles h5.larger { font-size: calc($h5-font-size + (($h4-font-size - $h5-font-size)/2)); } // H6 h6 { font-size:$h6-font-size; margin:0 0 2px 0; } // H6 larger styles h6.larger { font-size: calc($h6-font-size + (($h4-font-size - $h6-font-size)/2)); } @media screen and (max-width: 991px) { h1, h2:not(.lead), h3 { font-weight:normal; } .product_title img { margin-top:16px; } h1, .product_title h1 { font-size:3.8em; } h1+.lead { margin-top:-9px; font-size:24px; } h2:not(.lead) { font-size: 3em; } } @media screen and (max-width: 767px) { .product_title img { margin-top:16px; } h1, .product_title h1 { font-size:3.2em; } h2:not(.lead) { font-size: 2.6em; } h3 { font-size:2em; } h4 { font-size:1.6em; } h5 { font-size:1.25em; } } */ .btn { border-width: 0; border-radius: 3px; position: relative; display: inline-flex; align-items: center; justify-content: center; opacity: 1; transition: all 0.5s; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 1.05px; text-transform: uppercase; padding: 0.7em 1.2em; } .btn-lg { padding: 15px 25px; } .btn-sm { padding: 6px 15px; font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); } .btn::before, .btn::after { transition: all 0.5s; } [class*=btn-outline] { border-width: 2px; --bs-btn-color: var(--dark-oligos); } .btn-group > [class*=btn-outline]:not(:first-of-type) { border-left-width: 1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group > [class*=btn-outline]:not(:last-of-type) { border-right-width: 2px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-outline-light { --bs-btn-color: #fff; } .text-bg-dark > .btn { --bs-btn-color:#fff; } @property --rna-lights-500 { syntax: ""; inherits: false; initial-value: rgb(130, 0, 255); } @property --crispr-clear-600 { syntax: ""; inherits: false; initial-value: rgb(1, 143, 204); } @property --plasma-antibody-300 { syntax: ""; inherits: false; initial-value: rgb(161, 120, 255); } @property --cyanotic-bright-300 { syntax: ""; inherits: false; initial-value: rgb(81, 248, 255); } :not(.btn-group) > .btn-primary { --rna-lights-500:rgb(130,0,255); --crispr-clear-600:rgb(1, 143, 204); transition: --rna-lights-500 0.5s, --crispr-clear-600 0.5s; background-image: linear-gradient(90deg, var(--rna-lights-500), var(--crispr-clear-600)); } :not(.btn-group) > .btn-primary:hover, :not(.btn-group) > .btn-primary:focus, :not(.btn-group) > .btn-primary:active, :not(.btn-group) > .btn-primary.active { --rna-lights-500:rgb(58, 0, 149); --crispr-clear-600:rgb(80,20,160); } :not(.btn-group) > .btn-primary--dark { --bs-btn-color: var(--dark-oligos); --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-active-color: var(--bs-btn-color); --plasma-antibody-300:rgb(161,120,255); --cyanotic-bright-300:rgb(81,248,255); transition: --plasma-antibody-300 0.5s, --cyanotic-bright-300 0.5s; background-image: linear-gradient(94deg, var(--plasma-antibody-300), var(--cyanotic-bright-300)); } :not(.btn-group) > .btn-primary--dark:hover, :not(.btn-group) > .btn-primary--dark:focus, :not(.btn-group) > .btn-primary--dark:active, :not(.btn-group) > .btn-primary--dark.active { --plasma-antibody-300:rgb(245,245,250); --cyanotic-bright-300:rgb(245,245,250); } .btn.btn-primary-solid { --bs-btn-bg: var(--bio-orchid); --bs-btn-border-color: var(--bio-orchid); --bs-btn-color: rgb(255, 255, 255); --bs-btn-active-bg: var(--rna-lights-800); --bs-btn-active-border-color: var(--rna-lights-800); --bs-btn-active-color: rgb(255, 255, 255); --bs-btn-hover-bg: var(--rna-lights-800); --bs-btn-hover-border-color: var(--rna-lights-800); --bs-btn-hover-color: rgb(255, 255, 255); } .btn-group > .btn-primary { --bs-btn-bg: var(--bio-orchid); --bs-btn-border-color: var(--bio-orchid); --bs-btn-color: rgb(255, 255, 255); --bs-btn-active-bg: var(--rna-lights-800); --bs-btn-active-border-color: var(--rna-lights-800); --bs-btn-active-color: rgb(255, 255, 255); --bs-btn-hover-bg: var(--rna-lights-800); --bs-btn-hover-border-color: var(--rna-lights-800); --bs-btn-hover-color: rgb(255, 255, 255); } .btn-group > .btn-primary--dark { --bs-btn-bg: rgb(255, 255, 255); --bs-btn-border-color: rgb(255, 255, 255); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-bg: var(--plasma-antibody-300); --bs-btn-hover-border-color: var(--plasma-antibody-300); --bs-btn-hover-color: rgb(255, 255, 255); } .btn-group > .btn-primary--dark:hover, .btn-group > .btn-primary--dark:focus, .btn-group > .btn-primary--dark:active, .btn-group > .btn-primary--dark.active { background-color: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); } .btn-group > .btn-check:not(:checked) + .btn-primary { --bs-btn-hover-bg: var(--plasma-antibody-300); --bs-btn-hover-border-color: var(--plasma-antibody-300); --bs-btn-hover-color: rgb(255, 255, 255); } .btn-group > .btn-check:not(:checked) + .btn-primary:hover, .btn-group > .btn-check:not(:checked) + .btn-primary:focus, .btn-group > .btn-check:not(:checked) + .btn-primary:active, .btn-group > .btn-check:not(:checked) + .btn-primary.active { background-color: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); border-color: var(--bs-btn-border-color); } .btn-group > .btn-check:checked + .btn-primary--dark { background-color: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); } .btn-group > .btn-outline-primary--dark { --bs-btn-bg: transparent; --bs-btn-border-color: rgb(255, 255, 255); --bs-btn-color: rgb(255, 255, 255); --bs-btn-hover-bg: var(--plasma-antibody-300); --bs-btn-hover-border-color: var(--plasma-antibody-300); --bs-btn-hover-color: rgb(255, 255, 255); background-color: var(--bs-btn-bg); color: var(--bs-btn-color); border-color: var(--bs-btn-border-color); } .btn-group > .btn-outline-primary--dark:hover, .btn-group > .btn-outline-primary--dark:focus, .btn-group > .btn-outline-primary--dark:active, .btn-group > .btn-outline-primary--dark.active { --bs-btn-color: var(--bs-btn-hover-color); color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } .btn-group > .btn-outline-primary--dark:hover:nth-of-type(n+2), .btn-group > .btn-outline-primary--dark:focus:nth-of-type(n+2), .btn-group > .btn-outline-primary--dark:active:nth-of-type(n+2), .btn-group > .btn-outline-primary--dark.active:nth-of-type(n+2) { position: relative; margin-left: -2px; } .btn-group > .btn-check:checked + .btn-outline-primary--dark { --bs-btn-color: var(--bs-btn-hover-color); color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } .btn-group > .btn-check:checked + .btn-outline-primary--dark:nth-of-type(n+2) { position: relative; margin-left: -2px; } .btn-group > .btn-outline-primary { --bs-btn-border-color: var(--bio-orchid); } .btn-group > .btn-outline-primary:hover, .btn-group > .btn-outline-primary:focus, .btn-group > .btn-outline-primary:active, .btn-group > .btn-outline-primary.active { --bs-btn-border-color: var(--bio-orchid); --bs-btn-active-border-color: var(--bio-orchid); --bs-btn-hover-bg: var(--bio-orchid); --bs-btn-hover-border-color: var(--bio-orchid); --bs-btn-active-bg: var(--bio-orchid); --bs-btn-border-color: var(--bio-orchid); --bs-btn-hover-bg: var(--bio-orchid); --bs-btn-hover-border-color: var(--bio-orchid); --bs-btn-color: var(--bio-orchid); } .btn-group > .btn-check:checked + .btn-outline-primary { --bs-btn-border-color: var(--bio-orchid); --bs-btn-active-border-color: var(--bio-orchid); --bs-btn-hover-bg: var(--bio-orchid); --bs-btn-hover-border-color: var(--bio-orchid); --bs-btn-active-bg: var(--bio-orchid); --bs-btn-border-color: var(--bio-orchid); --bs-btn-hover-bg: var(--bio-orchid); --bs-btn-hover-border-color: var(--bio-orchid); --bs-btn-color: var(--bio-orchid); } :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch), :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch) { position: relative; border: none; z-index: 0; --bs-btn-bg:transparent; --bs-btn-hover-bg:transparent; --bs-btn-color: var(--dark-oligos); --bs-btn-hover-color:#fff; --secondary-btn-border-width: 2px; } :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch)[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch)[class*=btn-start--]::after { background: linear-gradient(to right, var(--plasma-antibody-500), var(--crispr-clear-600)); } :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch)[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch)[class*=btn-start--]::after { content: ""; border-radius: 3px; position: absolute; inset: 0; padding: var(--secondary-btn-border-width); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; z-index: -1; } :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):hover, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):focus, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):active, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).active, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):hover, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):focus, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):active, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).active { color: var(--bs-btn-hover-color); } :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):hover:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):hover[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):focus:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):focus[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):hover:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):hover[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):focus:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):focus[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).active[class*=btn-start--]::after { --plasma-antibody-500: var(--plasma-antibody-700); padding-left: 99%; padding-right: 1%; } :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:hover, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:focus, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:active, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled.active, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:hover, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:focus, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:active, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled.active, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:hover, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:focus, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:active, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled.active, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:hover, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:focus, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:active, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled.active { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); outline: none; } :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:hover:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:hover[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:focus:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:focus[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled:active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled.active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch):disabled.active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:hover:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:hover[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:focus:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:focus[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled:active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled.active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary:not(input):not(.btn-notch).disabled.active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:hover:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:hover[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:focus:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:focus[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled:active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled.active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):disabled.active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:hover:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:hover[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:focus:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:focus[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled:active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled.active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).disabled.active[class*=btn-start--]::after { padding: var(--secondary-btn-border-width); } :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch) { --bs-btn-color:#fff; --bs-btn-hover-color: var(--dark-oligos); } :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch)[class*=btn-start--]::after { background: linear-gradient(to right, var(--plasma-antibody-300), var(--cyanotic-bright-300)); } :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):hover:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):hover[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):focus:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):focus[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch):active[class*=btn-start--]::after, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).active:not([class*=btn-start--])::before, :not(.btn-group) > .btn.btn-secondary--dark:not(input):not(.btn-notch).active[class*=btn-start--]::after { --plasma-antibody-300: rgb(255, 255, 255); --cyanotic-bright-300: rgb(255, 255, 255); } input.btn.btn-secondary--dark { --bs-btn-bg:transparent; --bs-btn-color:#fff; --bs-btn-border-color: var(--bs-btn-color); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--dark-oligos); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); background: var(--bs-btn-bg); border: 2px solid var(--bs-btn-border-color); } input.btn.btn-secondary--dark:hover, input.btn.btn-secondary--dark:focus, input.btn.btn-secondary--dark:active, input.btn.btn-secondary--dark.active { background: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); } :not(.btn-group) > .btn-outline-secondary { --bs-btn-border-color: var(--bio-orchid); --bs-btn-hover-border-color: var(--rna-lights-800); --bs-btn-hover-bg: var(--rna-lights-800); --bs-btn-active-bg: var(--bs-btn-hover-bg); } .d-grid > [class*=btn-start--], .d-grid > [class*=btn-end--], .d-flex > [class*=btn-start--], .d-flex > [class*=btn-end--] { width: auto; } /* Split-out btn-start and btn-end declerations so these don't interfere with other classes attempting to use the opposite psuedo-element that's not needed */ [class*=btn-start--] { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; width: fit-content; } [class*=btn-start--]:before { content: ""; width: 1.1em; height: 1.1em; mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: var(--bs-btn-color); } [class*=btn-start--]:hover:before, [class*=btn-start--]:focus:before, [class*=btn-start--]:active:before, [class*=btn-start--].active:before { background-color: var(--bs-btn-hover-color); } .btn-check:checked + [class*=btn-start--]:before { background-color: var(--bs-btn-hover-color); } [class*=btn-end--] { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; width: fit-content; } [class*=btn-end--]:after { content: ""; width: 1.1em; height: 1.1em; mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: var(--bs-btn-color); } [class*=btn-end--]:hover:after, [class*=btn-end--]:focus:after, [class*=btn-end--]:active:after, [class*=btn-end--].active:after { background-color: var(--bs-btn-hover-color); } .btn-check:checked + [class*=btn-end--]:after { background-color: var(--bs-btn-hover-color); } .btn-start--arrow-clockwise::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/arrow-clockwise.svg); } .btn-start--bookmark::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/bookmark.svg); } .btn-start--bookmark-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/bookmark-fill.svg); } .btn-start--box-arrow-left::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/box-arrow-left.svg); } .btn-start--broadcast-pin::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/broadcast-pin.svg); } .btn-start--browser-chrome::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/browser-chrome.svg); } .btn-start--brush::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/brush.svg); } .btn-start--cart-check::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cart-check.svg); } .btn-start--cash-coin::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cash-coin.svg); } .btn-start--check-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/check-circle.svg); } .btn-start--check-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/check-circle-fill.svg); } .btn-start--chevron-double-left::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-double-left.svg); } .btn-start--chevron-double-right::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-double-right.svg); } .btn-start--chevron-down::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-down.svg); } .btn-start--chevron-left::before { mask-image: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%3E%3Cpath%20d%3D%22m6.51%2C12.87c.16%2C0%2C.33-.06.45-.18.26-.25.27-.66.02-.92L1.91%2C6.5%2C6.97%2C1.46c.25-.25.25-.67%2C0-.92-.25-.25-.67-.26-.92%2C0L.54%2C6.03c-.25.25-.25.66%2C0%2C.91l5.52%2C5.73c.13.13.3.2.47.2Z%22%20style%3D%22fill%3A%230c2433%3B%22/%3E%3C/svg%3E); } .btn-start--chevron-right::before { mask-image: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22m1%2C12.87c-.16%2C0-.33-.06-.45-.18-.26-.25-.27-.66-.02-.92l5.07-5.27L.54%2C1.46c-.25-.25-.25-.67%2C0-.92.25-.25.67-.26.92%2C0l5.52%2C5.49c.25.25.25.66%2C0%2C.91L1.47%2C12.67c-.13.13-.3.2-.47.2Z%22%20style%3D%22fill%3A%230c2433%3B%22/%3E%0A%3C/svg%3E); } .btn-start--chevron-up::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-up.svg); } .btn-start--clock-history::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/clock-history.svg); } .btn-start--cloud-arrow-down::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cloud-arrow-down.svg); } .btn-start--cloud-download::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cloud-download.svg); } .btn-start--copy::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/copy.svg); } .btn-start--credit-card::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/credit-card.svg); } .btn-start--credit-card-2-front::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/credit-card-2-front.svg); } .btn-start--dash-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/dash-circle.svg); } .btn-start--dash-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/dash-circle-fill.svg); } .btn-start--download::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/download.svg); } .btn-start--envelope::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/envelope.svg); } .btn-start--envelope-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/envelope-fill.svg); } .btn-start--exclamation-octagon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-octagon.svg); } .btn-start--exclamation-octagon-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-octagon-fill.svg); } .btn-start--exclamation-triangle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-triangle.svg); } .btn-start--exclamation-triangle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-triangle-fill.svg); } .btn-start--fast-forward::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/fast-forward.svg); } .btn-start--file-earmark::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark.svg); } .btn-start--file-earmark-arrow-down::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-arrow-down.svg); } .btn-start--file-earmark-excel::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-excel.svg); } .btn-start--file-earmark-excel-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-excel-fill.svg); } .btn-start--file-earmark-pdf::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-pdf.svg); } .btn-start--file-earmark-pdf-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-pdf-fill.svg); } .btn-start--file-earmark-spreadsheet::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-spreadsheet.svg); } .btn-start--file-earmark-spreadsheet-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-spreadsheet-fill.svg); } .btn-start--flask::before { mask-image: url(https://sfvideo.blob.core.windows.net/sitefinity/images/default-source/site-design/icons/flask.svg); } .btn-start--flask-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/sitefinity/images/default-source/site-design/icons/flask-fill.svg); } .btn-start--gear::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/gear.svg); } .btn-start--gear-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/gear-fill.svg); } .btn-start--geo-alt::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/geo-alt.svg); } .btn-start--geo-alt-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/geo-alt-fill.svg); } .btn-start--info-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle.svg); } .btn-start--info-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .btn-start--key::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/key.svg); } .btn-start--life-preserver::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/life-preserver.svg); } .btn-start--lock::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/lock.svg); } .btn-start--person::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/person.svg); } .btn-start--person-rolodex::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/person-rolodex.svg); } .btn-start--plus-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/plus-circle.svg); } .btn-start--plus-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/plus-circle-fill.svg); } .btn-start--processing-spinner::before { mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJtMTYuMjcsMTIuMzVjLTEuMjUsMy4yOS00Ljk3LDUuMjItOC42MywzLjg3LTIuMzQtLjg2LTMuOTctMi44OS00LjI1LTUuMzctLjQ2LTMuOTYsMi4zNS03LjExLDUuODQtNy41My43Ny0uMDksMS4zNS0uNzUsMS40MS0xLjUzaDBjLjA4LTEuMDctLjg1LTEuOTItMS45MS0xLjc5LTIuMTMuMjctNC4yLDEuMjQtNS44NywyLjkyQy0uNDIsNi4yNi0uOTUsMTEuNTksMS42NCwxNS40OGMzLjM3LDUuMDcsMTAuMjcsNS45OCwxNC44MiwyLjE5LDEuMzQtMS4xMiwyLjMxLTIuNTEsMi45MS00LjAzLjM5LS45OS0uMjItMi4xLTEuMjctMi4yOGgwYy0uNzYtLjEzLTEuNTUuMjYtMS44Mi45OVoiLz48L3N2Zz4=); } .btn-start--question-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/question-circle.svg); } .btn-start--question-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/question-circle-fill.svg); } .btn-start--receipt-cutoff::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/receipt-cutoff.svg); } .btn-start--repeat::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/repeat.svg); } .btn-start--reply-all::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/reply-all.svg); } .btn-start--rewind::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/rewind.svg); } .btn-start--rulers::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/rulers.svg); } .btn-start--search::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/search.svg); } .btn-start--tag::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/tag.svg); } .btn-start--tools::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/tools.svg); } .btn-start--trash::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/trash.svg); } .btn-start--upload::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/upload.svg); } .btn-start--wallet::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/wallet.svg); } .btn-start--x-circle::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-circle.svg); } .btn-start--x-circle-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-circle-fill.svg); } .btn-start--x-octagon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-octagon.svg); } .btn-start--x-octagon-fill::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-octagon-fill.svg); } .btn-start--arrow-clockwise::before, .btn-start--cloud-arrow-down::before, .btn-start--fast-forward::before { width: 1.3em; height: 1.3em; } .btn-start--chevron-left::before, .btn-start--chevron-right::before { width: 0.9em; height: 0.9em; } .btn-start--cloud-arrow-down, .btn-start--repeat, .btn-start--reply-all { gap: 0.6em; } .btn-start--processing-spinner::before { animation: 0.75s linear infinite spinner-border; } .btn-end--arrow-clockwise::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/arrow-clockwise.svg); } .btn-end--bookmark::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/bookmark.svg); } .btn-end--bookmark-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/bookmark-fill.svg); } .btn-end--box-arrow-left::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/box-arrow-left.svg); } .btn-end--broadcast-pin::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/broadcast-pin.svg); } .btn-end--browser-chrome::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/browser-chrome.svg); } .btn-end--brush::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/brush.svg); } .btn-end--cart-check::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cart-check.svg); } .btn-end--cash-coin::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cash-coin.svg); } .btn-end--check-circle::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/check-circle.svg); } .btn-end--check-circle-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/check-circle-fill.svg); } .btn-end--chevron-double-left::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-double-left.svg); } .btn-end--chevron-double-right::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-double-right.svg); } .btn-end--chevron-down::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-down.svg); } .btn-end--chevron-left::after { mask-image: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%3E%3Cpath%20d%3D%22m6.51%2C12.87c.16%2C0%2C.33-.06.45-.18.26-.25.27-.66.02-.92L1.91%2C6.5%2C6.97%2C1.46c.25-.25.25-.67%2C0-.92-.25-.25-.67-.26-.92%2C0L.54%2C6.03c-.25.25-.25.66%2C0%2C.91l5.52%2C5.73c.13.13.3.2.47.2Z%22%20style%3D%22fill%3A%230c2433%3B%22/%3E%3C/svg%3E); } .btn-end--chevron-right::after { mask-image: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2213%22%20viewBox%3D%220%200%208%2013%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22m1%2C12.87c-.16%2C0-.33-.06-.45-.18-.26-.25-.27-.66-.02-.92l5.07-5.27L.54%2C1.46c-.25-.25-.25-.67%2C0-.92.25-.25.67-.26.92%2C0l5.52%2C5.49c.25.25.25.66%2C0%2C.91L1.47%2C12.67c-.13.13-.3.2-.47.2Z%22%20style%3D%22fill%3A%230c2433%3B%22/%3E%0A%3C/svg%3E); } .btn-end--chevron-up::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/chevron-up.svg); } .btn-end--clock-history::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/clock-history.svg); } .btn-end--cloud-arrow-down::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cloud-arrow-down.svg); } .btn-end--cloud-download::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/cloud-download.svg); } .btn-end--copy::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/copy.svg); } .btn-end--credit-card::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/credit-card.svg); } .btn-end--credit-card-2-front::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/credit-card-2-front.svg); } .btn-end--dash-circle::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/dash-circle.svg); } .btn-end--dash-circle-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/dash-circle-fill.svg); } .btn-end--download::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/download.svg); } .btn-end--envelope::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/envelope.svg); } .btn-end--envelope-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/envelope-fill.svg); } .btn-end--exclamation-octagon::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-octagon.svg); } .btn-end--exclamation-octagon-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-octagon-fill.svg); } .btn-end--exclamation-triangle::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-triangle.svg); } .btn-end--exclamation-triangle-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-triangle-fill.svg); } .btn-end--fast-forward::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/fast-forward.svg); } .btn-end--file-earmark::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark.svg); } .btn-end--file-earmark-arrow-down::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-arrow-down.svg); } .btn-end--file-earmark-excel::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-excel.svg); } .btn-end--file-earmark-excel-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-excel-fill.svg); } .btn-end--file-earmark-pdf::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-pdf.svg); } .btn-end--file-earmark-pdf-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-pdf-fill.svg); } .btn-end--file-earmark-spreadsheet::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-spreadsheet.svg); } .btn-end--file-earmark-spreadsheet-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/file-earmark-spreadsheet-fill.svg); } .btn-end--flask::after { mask-image: url(https://sfvideo.blob.core.windows.net/sitefinity/images/default-source/site-design/icons/flask.svg); } .btn-end--flask-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/sitefinity/images/default-source/site-design/icons/flask-fill.svg); } .btn-end--gear::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/gear.svg); } .btn-end--gear-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/gear-fill.svg); } .btn-end--geo-alt::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/geo-alt.svg); } .btn-end--geo-alt-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/geo-alt-fill.svg); } .btn-end--info-circle::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle.svg); } .btn-end--info-circle-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .btn-end--key::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/key.svg); } .btn-end--life-preserver::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/life-preserver.svg); } .btn-end--lock::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/lock.svg); } .btn-end--person::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/person.svg); } .btn-end--person-rolodex::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/person-rolodex.svg); } .btn-end--plus-circle::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/plus-circle.svg); } .btn-end--plus-circle-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/plus-circle-fill.svg); } .btn-end--processing-spinner::after { mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJtMTYuMjcsMTIuMzVjLTEuMjUsMy4yOS00Ljk3LDUuMjItOC42MywzLjg3LTIuMzQtLjg2LTMuOTctMi44OS00LjI1LTUuMzctLjQ2LTMuOTYsMi4zNS03LjExLDUuODQtNy41My43Ny0uMDksMS4zNS0uNzUsMS40MS0xLjUzaDBjLjA4LTEuMDctLjg1LTEuOTItMS45MS0xLjc5LTIuMTMuMjctNC4yLDEuMjQtNS44NywyLjkyQy0uNDIsNi4yNi0uOTUsMTEuNTksMS42NCwxNS40OGMzLjM3LDUuMDcsMTAuMjcsNS45OCwxNC44MiwyLjE5LDEuMzQtMS4xMiwyLjMxLTIuNTEsMi45MS00LjAzLjM5LS45OS0uMjItMi4xLTEuMjctMi4yOGgwYy0uNzYtLjEzLTEuNTUuMjYtMS44Mi45OVoiLz48L3N2Zz4=); } .btn-end--question-circle::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/question-circle.svg); } .btn-end--question-circle-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/question-circle-fill.svg); } .btn-end--receipt-cutoff::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/receipt-cutoff.svg); } .btn-end--repeat::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/repeat.svg); } .btn-end--reply-all::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/reply-all.svg); } .btn-end--rewind::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/rewind.svg); } .btn-end--rulers::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/rulers.svg); } .btn-end--search::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/search.svg); } .btn-end--tag::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/tag.svg); } .btn-end--tools::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/tools.svg); } .btn-end--trash::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/trash.svg); } .btn-end--upload::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/upload.svg); } .btn-end--wallet::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/wallet.svg); } .btn-end--x-circle::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-circle.svg); } .btn-end--x-circle-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-circle-fill.svg); } .btn-end--x-octagon::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-octagon.svg); } .btn-end--x-octagon-fill::after { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/x-octagon-fill.svg); } .btn-end--arrow-clockwise::after, .btn-end--cloud-arrow-down::after, .btn-end--fast-forward::after { width: 1.3em; height: 1.3em; } .btn-end--chevron-left::after, .btn-end--chevron-right::after { width: 0.9em; height: 0.9em; } .btn-end--cloud-arrow-down, .btn-end--repeat, .btn-end--reply-all { gap: 0.6em; } .btn-end--processing-spinner::after { animation: 0.75s linear infinite spinner-border; } .btn-start--processing-spinner, .btn-start--upload, .btn-start--envelope, .btn-start--copy, .btn-end--processing-spinner, .btn-end--upload, .btn-end--envelope, .btn-end--copy { gap: 0.5em; } .btn-notch { clip-path: polygon(14px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 14px); } .btn:disabled, .btn.disabled, fieldset:disabled .btn { --bs-btn-color: #000; --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-bg:var(--membrane-grey-200); --bs-btn-disabled-bg: var(--bs-btn-bg); --bs-btn-border-color: var(--bs-btn-bg); --bs-btn-active-bg: var(--bs-btn-bg); --bs-btn-acitive-color: var(--vs-btn-color); --bs-btn-disabled-border-color: var(--bs-btn-bg); background-image: none; transition: all 0.5s; --plasma-antibody-300: var(--membrane-grey-200); --cyanotic-bright-300: var(--membrane-grey-200); --rna-lights-500: var(--membrane-grey-200); --crispr-clear-600: var(--membrane-grey-200); } .btn:disabled:not([class*=btn-start--])::before, .btn:disabled[class*=btn-start--]::after, .btn.disabled:not([class*=btn-start--])::before, .btn.disabled[class*=btn-start--]::after, fieldset:disabled .btn:not([class*=btn-start--])::before, fieldset:disabled .btn[class*=btn-start--]::after { background-color: var(--bs-btn-color); } .btn:disabled:not([class*=btn-start--])::before, .btn:disabled[class*=btn-start--]::after, .btn.disabled:not([class*=btn-start--])::before, .btn.disabled[class*=btn-start--]::after, fieldset:disabled .btn:not([class*=btn-start--])::before, fieldset:disabled .btn[class*=btn-start--]::after { --bs-btn-disabled-border-color: var(--membrane-grey-200); background: var(--bs-btn-disabled-border-color) !important; } .btn-clear-primary { --bs-btn-color: var(--plasma-antibody-800); --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--plasma-antibody-500); --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--plasma-antibody-500); position: relative; } .btn-clear-primary:not([class*=btn-start--])::before, .btn-clear-primary[class*=btn-start--]::after { --bs-btn-padding-x:18px; --rna-lights-500:rgb(130,0,255); --crispr-clear-600:rgb(1, 143, 204); transition: --rna-lights-500 0.5s, --crispr-clear-600 0.5s; content: ""; display: block; position: absolute; bottom: 0.2rem; left: var(--bs-btn-padding-x); right: var(--bs-btn-padding-x); height: 3px; background-image: linear-gradient(90deg, var(--rna-lights-500), var(--crispr-clear-600)); } .btn-clear-primary:hover:not([class*=btn-start--])::before, .btn-clear-primary:hover[class*=btn-start--]::after, .btn-clear-primary:focus:not([class*=btn-start--])::before, .btn-clear-primary:focus[class*=btn-start--]::after, .btn-clear-primary:active:not([class*=btn-start--])::before, .btn-clear-primary:active[class*=btn-start--]::after, .btn-clear-primary.active:not([class*=btn-start--])::before, .btn-clear-primary.active[class*=btn-start--]::after { --rna-lights-500:rgb(58, 0, 149); --crispr-clear-600:rgb(80,20,160); } .btn-clear-primary:disabled, .btn-clear-primary.disabled { --bs-btn-color: #000; --bs-btn-bg:transparent; } input.btn-clear-primary { border-bottom: 3px solid var(--rna-lights-500); } input.btn-clear-primary:hover, input.btn-clear-primary:focus, input.btn-clear-primary:active, input.btn-clear-primary.active { border-bottom-color: var(--plasma-antibody-700); } .btn-clear-secondary { --bs-btn-color: var(--plasma-antibody-800); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--plasma-antibody-500); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--plasma-antibody-500); --bs-btn-active-color: #fff; } .btn-clear-secondary:disabled, .btn-clear-secondary.disabled { --bs-btn-color: #000; --bs-btn-bg:transparent; } @property --color-end { syntax: ""; inherits: false; initial-value: rgb(89, 89, 89); } @property --color-start { syntax: ""; inherits: false; initial-value: rgb(206, 208, 212); } @property --color-stop { syntax: ""; inherits: false; initial-value: 0%; } a.btn-underline-arrow { color: #595959; text-decoration: none; } .btn-underline-arrow { color: #595959; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 26px; display: inline-block; padding-bottom: 3px; position: relative; } .btn-underline-arrow:before { --color-start: rgb(206,208,212); --color-end: rgb(89,89,89); --color-stop: 0%; content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; transition: --color-stop 0.5s; background-color: rgb(206, 208, 212); background: linear-gradient(to right, var(--color-end) var(--color-stop), var(--color-start) var(--color-stop)); } .btn-underline-arrow:after { font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; content: " \f105"; position: relative; left: 4px; font-size: 17px; line-height: 1; transition: all 0.5s; } .btn-underline-arrow:hover:before { --color-stop: 100%; } .btn-underline-arrow:hover:after { left: 8px; } /* ====================================== Bootstrap overwrites ========================================= */ .ct-section.nav { display: block; } /* ====================================== Header ========================================= */ /* ====================================== Footer ========================================= */ .table { --bs-table-striped-bg: rgb(245, 248, 253); } .nav-link { cursor: pointer; } .nav.nav-list { display: block; } .nav.nav-list .nav-item { margin-top: 10px; } .nav.nav-list .nav-item:first-of-type { margin-top: 0; } .nav-lg { --bs-nav-link-font-size: 1.4rem; } .nav-underline { --idt-nav-underline-link-active-bg-color: var(--helix-feather); --bs-nav-link-padding-y:1.1rem; --bs-nav-link-padding-x:1.1rem; --bs-nav-underline-gap: 2rem; --bs-nav-link-color: rgb(89, 89, 89); --bs-nav-link-font-weight: 600; --bs-nav-link-hover-color: var(--bs-nav-underline-link-active-color); --bs-nav-underline-link-active-color: var(--deep-affinity); --bs-nav-link-disabled-color: rgb(143, 143, 143); } .nav-underline .nav-link { padding-left: var(--bs-nav-link-padding-x); padding-right: var(--bs-nav-link-padding-x); } .nav-underline .nav-link:hover, .nav-underline .nav-link:focus { border-color: transparent; background-color: var(--idt-nav-underline-link-active-bg-color); } .nav-underline .nav-link.active, .nav-underline .show > .nav-link { --bs-nav-underline-border-width: 0.2rem; background-color: var(--idt-nav-underline-link-active-bg-color); } .nav-underline .nav-link.active:hover, .nav-underline .nav-link.active:focus, .nav-underline .show > .nav-link:hover, .nav-underline .show > .nav-link:focus { border-color: currentColor; } .nav-underline .nav-link.active { pointer-events: none; } .accordion-alert { border: 1px solid var(--bs-primary); border-radius: var(--alert-border-radius); overflow: hidden; box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1); } .accordion-alert .accordion-button { --bs-accordion-btn-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-bg: var(--neuron-block-200); } .accordion-alert .accordion-button:hover, .accordion-alert .accordion-button:focus { background-color: var(--bs-accordion-active-bg); box-shadow: none; } .accordion-centered .accordion-button { justify-content: center; text-align: center; position: relative; padding-right: calc(var(--bs-accordion-btn-padding-x) + var(--bs-accordion-btn-icon-width) * 2); } .accordion-centered .accordion-button::after { position: absolute; margin: auto; top: 0; right: var(--bs-accordion-btn-padding-x); bottom: 0; } .alert { border-radius: var(--alert-border-radius); align-items: flex-start; } .alert a:not(.btn) { --bs-link-color-rgb: var(--bs-alert-link-color); color: var(--bs-alert-link-color); font-weight: 600; } .alert > *:last-child { margin-bottom: 0; } .alert-icon { display: flex; } .alert-icon > .bi { margin-right: 0.7rem; } .alert > .btn-close { width: 1rem; height: 1rem; } .alert-primary .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .alert-secondary .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .alert-success .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .alert-danger .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-octagon-fill.svg); } .alert-warning .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/exclamation-triangle-fill.svg); } .alert-info .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .alert-light .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .alert-dark .bi-alert-icon::before { mask-image: url(https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle-fill.svg); } .alert-secondary > .btn-close { mask-size: 0.7rem; mask-repeat: no-repeat; mask-position: center; mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); background-color: var(--bs-secondary-text-emphasis); background-image: none; --bs-btn-close-opacity: .65; --bs-btn-close-hover-opacity: 1; border: 1px solid transparent; transition: mask-size 0.3s; } .alert-secondary > .btn-close:hover, .alert-secondary > .btn-close:active, .alert-secondary > .btn-close:focus { mask-size: 0.9rem; } .badge.text-bg-primary { background-color: var(--bs-primary-bg-subtle-rgb) !important; color: var(--bs-primary-text-emphasis) !important; } .badge.text-bg-secondary { background-color: var(--bs-secondary-bg-subtle-rgb) !important; color: var(--bs-secondary-text-emphasis) !important; } .badge.text-bg-success { background-color: var(--bs-success-bg-subtle-rgb) !important; color: var(--bs-success-text-emphasis) !important; } .badge.text-bg-danger { background-color: var(--bs-danger-bg-subtle-rgb) !important; color: var(--bs-danger-text-emphasis) !important; } .badge.text-bg-warning { background-color: var(--bs-warning-bg-subtle-rgb) !important; color: var(--bs-warning-text-emphasis) !important; } .badge.text-bg-info { background-color: var(--bs-info-bg-subtle-rgb) !important; color: var(--bs-info-text-emphasis) !important; } .badge.text-bg-light { background-color: var(--bs-light-bg-subtle-rgb) !important; color: var(--bs-light-text-emphasis) !important; } .badge.text-bg-dark { background-color: var(--bs-dark-bg-subtle-rgb) !important; color: var(--bs-dark-text-emphasis) !important; } /* =================================== Bootstrap 5 forms overrides/additions ====================================== */ :root { --input-icon-size: 16px; } .form-check > input, .form-check > label { cursor: pointer; } .form-floating { margin-bottom: 1.5rem; } .form-floating.has-error { margin-bottom: 0; } .form-floating > label { font-weight: normal; } .form-check { margin-bottom: 0.9rem; } .form-check > input:not(.form-check-input) { margin-left: -1.5em; } .form-check > button { margin-left: 0.25rem; } .form-check:last-child { margin-bottom: 0; } .form-check > input:required + label::after { content: " [Required]"; color: var(--bs-form-invalid-color); } .form-check-input { --idt-form-check-bg-active: linear-gradient(90deg, var(--rna-lights-500), var(--crispr-clear-600)); } .form-check-input:checked { background-image: var(--bs-form-check-bg-image), var(--idt-form-check-bg-active); } .input-note { display: inline-block; vertical-align: middle; padding: 0; background-color: transparent; border: 0; background-image: none; position: relative; cursor: pointer; overflow: visible; width: var(--input-icon-size); height: var(--input-icon-size); } .input-note::after { display: block; content: ""; width: var(--input-icon-size); height: var(--input-icon-size); background-color: var(--bs-body-color); mask-image: url("https://sfvideo.blob.core.windows.net/bootstrap-icons/info-circle.svg"); mask-mode: alpha; mask-size: cover; mask-position: center; mask-repeat: no-repeat; } .input-note:hover::after, .input-note:focus::after, .input-note:active::after { background-color: var(--bs-cyan); } .form-floating > .input-note { --input-icon-size: 20px; position: absolute; right: 1rem; top: 0; bottom: 0; margin: auto; display: flex; align-items: center; justify-content: center; } label > .input-note { top: -2px; } .form-floating.has-error > input:not(:focus) ~ .input-note, .form-floating > .form-select ~ .input-note { right: 40px; } .form-group { padding-left: 10px; padding-right: 10px; margin: 1rem -10px; } .form-group + .invalid-feedback { margin-top: -10px; } fieldset { margin-bottom: 1rem; } fieldset > legend { font-size: 1.3rem; line-height: 1.2rem; } fieldset.form-group { margin-bottom: 0; } fieldset.form-group > legend { font-size: 1rem; line-height: 1; margin-bottom: 0.3rem; } fieldset > .form-check { margin-left: 0; margin-bottom: 0.3rem; } * > fieldset:last-child { margin-bottom: 0; } .form-switch-lg { padding-left: 5.5em; display: flex; align-items: center; } .form-switch-lg label { margin-left: 0.795em; } .form-switch-lg .form-check-input { height: 2em; width: 4em; margin-left: -5.5em; display: flex; align-items: center; justify-content: center; } .form-switch-lg .form-check-input:before { transition: 0.25s all; color: rgba(255, 0, 0, 0.5); font-size: 0.85em; content: "No"; transform: translateX(0.795em); } .form-switch-lg .form-check-input:checked:before { content: "Yes"; color: #fff; transform: translateX(-0.795em); } .form-check-group label { font-weight: normal; } .form-check-group:after { content: ""; clear: both; display: block; } .field-subset { background-color: #f0f8fa; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -1px; padding: 10px 15px; border-radius: 6px; transition: all 0.35s; } .field-subset > label:first-child { margin-bottom: 7px; font-size: 1.1em; font-weight: bold; } .field-subset + .field-subset { margin-top: 15px; } .step-tracker.form-top { padding: 10px; background-color: #f0f8fa; border-left: 3px solid #48a9c5; border-right: 3px solid #48a9c5; } .step-tracker.form-top .step-tracker__icon { background-color: #f0f8fa; } .step-tracker.form-top > .step-tracker__step--in-progress > .step-tracker__icon::after, .step-tracker.form-tracker > .step-tracker__step--in-progress > .step-tracker__icon::after { content: "\f040"; animation: none; } /* =============================================== Error states ================================================== */ select.has-error:not(:focus), .form-group.has-error > .form-control:not(:focus), .form-check-group.has-error:not(:focus), .form-floating.has-error > .form-control:not(:focus), .group-has-error .form-control { --input-icon-size: 20px; border-color: var(--bs-form-invalid-border-color); box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); padding-right: calc(var(--input-icon-size) * 2); background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); background-repeat: no-repeat; background-position: right calc(var(--input-icon-size) / 2) center; background-size: var(--input-icon-size); } .form-floating.has-error .form-select:not([multiple]):not([size]), .form-floating.has-error .form-select:not([multiple])[size="1"] { --input-icon-size: 20px; border-color: var(--bs-form-invalid-border-color); box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); --bs-form-select-bg-icon: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); padding-right: 4.125rem; background-position: right 0.75rem center, center right 2.25rem; background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .form-check.has-error .form-check-label, .group-has-error .form-check-label { color: var(--bs-form-invalid-color); } .form-check-input:invalid:not(:focus), .form-check.has-error .form-check-input:not(:focus), .group-has-error .form-check-input:not(:focus) { border-color: var(--bs-form-invalid-color); box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); } .form-check-input:invalid:checked:not(:focus), .form-check.has-error .form-check-input:checked:not(:focus), .group-has-error .form-check-input:checked:not(:focus) { background-image: var(--bs-form-check-bg-image); background-color: var(--bs-form-invalid-color); } [type=checkbox].has-error { outline: 1px solid var(--bs-form-invalid-color); } .invalid-feedback { /* Exclamation icon &::before { content: ''; width:15px; height:15px; display: inline-block; mask: url(icons.$exclamation-circle-fill-svg); mask-size: cover; background-color: var(--bs-form-invalid-color); margin-right:3px; position: relative; top:2px; } */ } .has-error + .invalid-feedback, .has-error > .invalid-feedback { display: inline-block; margin-bottom: 2rem; /* Pill-like fill look for message padding:.2em .5em; background-color: rgb(var(--bs-danger-rgb)); color:#fff; width:auto; border-radius: 4px; */ } .form-floating + .invalid-feedback { margin-top: 7px; } .has-error .form-control:focus { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: #80a5c3; outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 75, 135, 0.25); } .form-floating > :disabled:not(:placeholder-shown) ~ label::after { background-color: var(--bs-secondary-bg); } /* =============================================== Button group overwrites/shoring-up =================================================== */ .idt-form .btn-group > .btn { border-radius: 0; } .idt-form .btn-group > .btn, .idt-form .btn-group > .btn:first-child, .idt-form .btn-group > .btn:last-child { border-radius: 0; } .idt-form .btn-group > .btn:not(:only-child):first-of-type { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .idt-form .btn-group > .btn:not(:only-child):last-of-type { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } @media only screen and (max-width: 420px) { .btn-group.wrap-xs { display: block; } .btn-group.wrap-xs > .btn:not(:only-child) { border-radius: 0; float: none; display: block; } .btn-group.wrap-xs > .btn:not(:only-child):first-of-type { border-radius: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; } .btn-group.wrap-xs > .btn:not(:only-child):last-of-type { border-radius: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } input:checked + .btn_outline { color: #fff; background-color: #004b87; } /* Input styles - additional prefixes for things like currency symbols to display next to input field */ .floating-input-prefix > .input-prefix { display: flex; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; padding: 5px 0.75em; color: rgba(50, 50, 50, 0.5); } .floating-input-prefix > .input-prefix:focus, .floating-input-prefix > .input-prefix:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.625rem; } .floating-input-prefix > .form-control { padding-left: 30px; } /* Switch toggle extras */ .form-switch-ext-label > .form-check-input:before, .form-switch-ext-label > .form-check-input:checked::before { content: ""; } .form-switch-lg > .form-switch-label { font-size: 1.2em; } .form-check-input + .form-switch-label { margin-left: 10px; color: #444; } /* ================================== Hero banners ===================================== */ .hero-banner { padding-top: 70px; padding-bottom: 70px; } .hero-banner__image-bg { background-image: url(/page/wp-content/uploads/Oligos-Reagents-2-scaled.jpg); background-size: cover; position: relative; background-repeat: no-repeat; background-position: right top; background-color: #07314f; color: #fff; } .hero-banner__container { max-width: 800px; } .hero-banner__heading { font-size: 5.625rem; line-height: 1.15; font-weight: 500; margin-bottom: 25px; } .hero-banner__intro-text { font-size: 1.25rem; line-height: 1.41; max-width: 610px; } @media (max-width: 991px) { .hero-banner__container { max-width: 700px; } .hero-banner__heading { font-size: 4.5rem; } } @media (max-width: 767px) { .hero-banner__container { max-width: 610px; } .hero-banner__heading { font-size: 3.75rem; } } /* =================================== Notch CTA ====================================== */ .notch-cta { overflow: hidden; padding: 60px 40px; clip-path: polygon(3rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 3rem); border-radius: 3px; background: rgb(6, 26, 50); background: radial-gradient(ellipse at 50% 80%, rgb(6, 26, 50) 31%, rgb(6, 67, 105) 90%); color: #fff; } @media (max-width: 479px) { .notch-cta { padding: 50px 20px; } } .notch-cta__content-container { display: flex; align-items: center; max-width: 1080px; margin-left: auto; margin-right: auto; } @media (max-width: 1199px) { .notch-cta__content-container { display: block; } } .notch-cta__heading { flex-grow: 2; color: #fff; font-family: Diagramm, Arial, sans-serif; font-size: 40px; font-weight: 700; line-height: 40px; } @media (max-width: 1199px) { .notch-cta__heading { display: block; margin-bottom: 20px; } } @media screen and (max-width: 767px) { .notch-cta__heading { font-size: 36px; } } .notch-cta .btn { margin-left: 40px; } @media (max-width: 1199px) { .notch-cta .btn { margin-left: 0; } } /* ========================================= Page/Card links ============================================ */ .page-card-links__container { display: flex; flex-wrap: wrap; margin-left: -1%; margin-right: -1%; } .page-card-links__item { padding: 26px 30px 30px 30px; position: relative; text-align: left; background-color: rgb(245, 248, 253); border-radius: 3px; transition: all 0.3s ease; overflow: hidden; flex-basis: 31%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; text-decoration: none; color: #595959; } .page-card-links__item:first-of-type { clip-path: polygon(1.875rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 1.875rem); } .page-card-links__item:focus, .page-card-links__item:hover, .page-card-links__item:active, .page-card-links__item.active { text-decoration: none; background-color: rgba(245, 248, 253, 0); color: #fff; } .page-card-links__item:focus .page-card-links__heading, .page-card-links__item:hover .page-card-links__heading, .page-card-links__item:active .page-card-links__heading, .page-card-links__item.active .page-card-links__heading { color: #fff; } .page-card-links__item:focus::after, .page-card-links__item:hover::after, .page-card-links__item:active::after, .page-card-links__item.active::after { opacity: 1; } .page-card-links__item::after { content: ""; position: absolute; margin: auto; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(237deg, #04A4FF 2.56%, #793BF0 75.75%); opacity: 0; transition: opacity 0.5s ease; z-index: -1; } .page-card-links__heading { font-weight: 600; color: var(--bio-orchid-600); font-size: 1.7rem; line-height: 1.2; padding-bottom: 12px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #9ea7b7; display: block; transition: all 0.3s ease; } .page-card-links__content { margin-top: 0.8rem; } @media (max-width: 991px) { .page-card-links__item { flex-basis: 48%; } } @media (max-width: 767px) { .page-card-links__container { display: block; padding-left: 0; padding-right: 0; } .page-card-links__item { display: block; margin-left: 0; margin-right: 0; margin-bottom: 20px; } } /* =========================================== List cards ============================================== */ .list-cards__item { padding: 30px; background-color: #f5f8fd; height: 100%; } .list-cards__item:first-of-type { clip-path: polygon(1.875rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 1.875rem); } .list-cards__item a { color: #595959; text-decoration: none; transition: color 0.2s; } .list-cards__item a:hover, .list-cards__item a:focus, .list-cards__item a:active { color: #0c2433; text-decoration: underline; } .list-cards__item:last-child { margin-bottom: 0; } .list-cards__item-heading { color: var(--bio-orchid-600); font-size: 27px; font-weight: 600; line-height: 34px; } .list-cards__item-subhead { font-size: 20px; font-weight: bold; line-height: 1.1; } .list-cards__rep-photo-wrapper { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; margin: auto; } .list-cards__rep-photo { max-width: 100px; } [class*=sticky-] { z-index: 1; } /*# sourceMappingURL=idt-custom.css.map */