/* ==== Resets ==== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    box-sizing: border-box;
    font-size: 18px;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

*:focus {
    outline: -webkit-focus-ring-color auto 2px;
    outline-style: solid;
    outline-color: var(--dentalray-blue);
}

*:focus-visible {
    outline: -webkit-focus-ring-color auto 2px;
    outline-style: solid;
    outline-color: var(--dentalray-blue);
}

/* ==== Variables ===== */
:root {
    /* Main Colors */
    --dentalray-blue: #0B71DD;
    --dentalray-dark-blue: #022041;
    --dentalray-soft-dark-blue: #102E4E;
    --white: #ffffff;
    --white-75: rgba(255, 255, 255, .75);
    --white-soft: #F1F1F2;
    --white-light: #F8F9FA;
    --light-grey: #E6E6E6;
    --light-grey-dark: #CDCDCD;
    --grey-normal: #444444;
    --grey-dark: #2B2B2D;
    --dark-black: #000000;
    --dark-soft: #333;
    --border-light: #CCD5E0;
    --border-dark: #718096;
    /* Blues */
    --blue-900: #02206A;
    --blue-800: #032D80;
    --blue-700: #05419F;
    --blue-600: #0857BE;
    --blue-500: #0B71DD;
    --blue-400: #439CEA;
    --blue-300: #69BAF4;
    --blue-200: #9BD8FB;
    --blue-100: #CDEDFD;
    /* Success */
    --success-900: #055306;
    --success-800: #0E6509;
    --success-700: #0E6509;
    --success-600: #2E9615;
    --success-500: #44AF1D;
    --success-400: #79CF4D;
    --success-300: #A2E773;
    --success-200: #CBF7A4;
    --success-100: #E7FBD1;
    /* Warning */
    --warning-900: #7A4300;
    --warning-800: #935600;
    --warning-700: #B77100;
    --warning-600: #DB8E00;
    --warning-500: #FFAE00;
    --warning-400: #FFC83F;
    --warning-300: #FFD866;
    --warning-200: #FFE899;
    --warning-100: #FFF5CC;
    /* Danger */
    --danger-900: #7A081D;
    --danger-800: #930E1C;
    --danger-700: #B7161A;
    --danger-600: #DB2B20;
    --danger-500: #FF492D;
    --danger-400: #FF8261;
    --danger-300: #FFA581;
    --danger-200: #FFCAAB;
    --danger-100: #FFE7D5;
    /* Graidents | Use solid and gradient pair */
    --radial-blue-solid: rgb(11, 113, 221);
    --radial-blue-gradient: radial-gradient(circle, rgba(11, 113, 221, 1) 0%, rgba(11, 113, 221, 0) 100%);
    --radial-magenta-solid: rgb(222, 33, 175);
    --radial-magenta-gradient: radial-gradient(circle, rgba(222, 33, 175, 1) 0%, rgba(222, 33, 175, 0) 100%);
    --radial-light-blue-solid: rgb(205, 237, 253);
    --radial-light-blue-gradient: radial-gradient(circle, rgba(205, 237, 253, 1) 0%, rgba(205, 237, 253, 0) 100%);
    --linear-y-blue-solid: rgb(11, 113, 221);
    --linear-y-blue-gradient: linear-gradient(0deg, rgba(11, 113, 221, 1) 0%, rgba(8, 87, 190, 1) 100%);
    --linear-x-blue-solid: rgb(11, 113, 221);
    --linear-x-blue-gradient: linear-gradient(90deg, rgba(11, 113, 221, 1) 0%, rgba(8, 87, 190, 1) 100%);

    /* === Font-family === */
    --header-font: 'Poppins', sans-serif;
    --content-font: 'Roboto', sans-serif;
    /* === Font size === */
    --text-xtra-large: 3.33rem;
    --text-large: 2.66rem;
    --text-medium: 2rem;
    --text-small: 1.5rem;
    --text-normal: 1rem;
    --text-xtra-normal: .77rem;

}

/* ==== Global Styles ===== */
body {
    background: var(--white);
    color: var(--dark-soft);
    font-family: var(--content-font);
}

hr {
    width: 100%;
    margin: 32px 0;
}

sup {
    vertical-align: super;
    font-size: .5rem;
}

a {
    color: var(--dentalray-blue);
    text-decoration: underline;
    transition: .5s;
    cursor: pointer;
}

a:hover {
    cursor: pointer;
    color: var(--blue-700);
}

/* a:visited {
    color: var(--blue-200);
} */

a.img-link,
a.no-decor,
button>a {
    text-decoration: none;
    padding-bottom: 0;
    border-bottom: none;
}

button>a,
s button>a :hover {
    color: inherit;
}

#pricing a,
#learn-more a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--header-font);
    font-weight: 700;
    padding: 20px 0;
    color: var(--dentalray-dark-blue);
}

h1 {
    font-size: var(--text-xtra-large);
    line-height: 4.25rem;
}

h2 {
    font-size: var(--text-large);
    padding: 2rem 0;
    line-height: 3rem;
}

h3 {
    font-size: var(--text-medium);
    line-height: 2.5rem;
}

h4 {
    font-size: var(--text-small);
    padding: 20px 0;
    line-height: 34px;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    padding: 12px 0;
}

p {
    line-height: 1.35rem;
    font-weight: 400;
}

strong {
    font-weight: 700;
}

.emphasis {
    color: var(--dentalray-blue);
}

/* === Background Gradients === */
.blue-gradient,
.magenta-gradient,
.grey-gradient,
.black-gradient {
    z-index: 1;
    position: absolute;
}

.blue-gradient {
    background: radial-gradient(50% 50% at 50% 50%, rgba(11, 113, 221, .85) 0%, rgba(11, 113, 221, 0) 100%);
}

.magenta-gradient {
    background: radial-gradient(50% 50% at 50% 50%, rgba(221, 32, 174, 0.375) 0%, rgba(222, 33, 175, 0) 88.54%);
}

.grey-gradient {
    background: radial-gradient(50% 50% at 50% 50%, rgba(205, 237, 253, 0.2125) 0%, rgba(205, 237, 253, 0) 95.83%);
}

.black-gradient {
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 100%);
}

.gradient-large {
    width: 825px;
    height: 825px;
}

.gradient-medium {
    width: 600px;
    height: 600px;
}

.fade-in-out {
    animation-name: fade-in-out;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.scale-up {
    animation-name: scale-up;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.scale-down {
    animation-name: scale-down;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.scale-down-fade {
    animation-name: scale-down-fade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.flicker {
    animation-name: flicker;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes fade-in-out {
    0% {
        opacity: .75;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: .75;
    }
}

@keyframes move {
    0% {
        left: 0%;
        bottom: -10%;
    }

    50% {
        left: 2%;
        bottom: 4%
    }

    100% {
        left: 0%;
        bottom: -10%;
    }
}

@keyframes flicker {
    0% {
        opacity: 1;
    }

    25% {
        opacity: .25;
    }

    50% {
        opacity: .75;
    }

    75% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scale-up {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.5, 1.5);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes scale-down {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(.75, .75);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes scale-down-fade {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }

    50% {
        transform: scale(.75, .75);
        opacity: .5;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.bg-soft-white {
    background: var(--white-soft);
}

/* === Cards === */
.card,
.card-light,
.card-benefits {
    background: var(--white-soft);
    /* border: 1px solid var(--border-dark); */
    padding: 40px 20px;
    border-radius: 24px;
    /* box-shadow: 10px 10px 0 rgba(11, 113, 221, 0.25); */
}

.card.study {
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    padding: 20px;
    max-width: 470px;
    width: 100%;
}

.card-light {
    background: #FAFBFD;
    overflow: hidden;
}

.card-shadow {
    box-shadow: 20px 20px 0 rgba(11, 113, 221, 0.25);
}

.card-benefits {
    position: relative;
    max-width: 768px;
    /* padding-left: 160px; */
}

.process-card {
    max-width: 378px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 20px;
}

.img-ui {
    width: 99%;
}

.img-how {
    width: 160%;
}

.img-updates {
    max-width: 380px;
    width: 100%;
    border: 1px solid var(--border-light);
}

.img-col {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    gap: 20px;
}

.img-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 0;
    gap: 20px;
}

.img-placeholder {
    background: var(--warning-100);
    width: 100px;
    height: 100px;
}

.icon-div {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100px;
}

.img-icon {
    max-width: 100px;
    width: 100%;
}

.img-icon-80 {
    max-width: 80px;
    width: 100%;
}

.img-cbct {
    max-width: 500px;
}

.img-cbct>img {
    max-width: 500px;
    width: 100%;
}

.img-report {
    width: 100%
}

.img-72 {
    width: 72%;
}

.img-80 {
    width: 80%;
}

.img-90 {
    width: 90%;
}

.img-95 {
    width: 95%;
}

#cephx-report .add-on-img {
    max-width: 344px;
}



/* Buttons */
button,
a.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: var(--text-normal);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 100px;
    border: none;
    text-decoration: none;

}

button:hover,
a.btn:hover {
    cursor: pointer;
}

.btn-primary,
a.btn-primary {
    background: var(--linear-x-blue-solid);
    background: linear-gradient(90deg, rgba(11, 113, 221, 1) 0%, rgba(67, 156, 234, 1) 100%);
    color: var(--white);
    transition: .25s;
}

a.btn-primary {
    padding: 12px 24px;
    border-radius: 100px;
    border: none;
    text-decoration: none;
}

.btn-primary:hover,
a.btn-primary:hover {
    background: var(--linear-x-blue-solid);
    /* background: linear-gradient(90deg, rgba(11, 113, 221, 1) 0%, rgba(67, 156, 234, 1) 100%); */
    background: linear-gradient(90deg, rgba(67, 156, 234, 1) 0%, rgba(11, 113, 221, 1) 100%);
    box-shadow: 0 8px 40px rgba(11, 113, 221, .5);
    transition: .25s;
}

.btn-secondary,
a.btn-secondary {
    background-color: rgba(241, 241, 242, 0);
    color: var(--white);
    transition: .25s;
}

.btn-secondary:hover,
a.btn-secondary:hover {
    background-color: rgba(241, 241, 242, 1);
    color: var(--dentalray-blue);
    /* box-shadow: 0 8px 40px rgba(11, 113, 221, .75); */
}

.btn-tertiary,
a.btn-tertiary {
    background-color: none;
    color: var(--dark-soft);
    transition: .25s;
}

.btn-tertiary:hover,
a.btn-tertiary:hover {
    background-color: var(--white-soft);
    color: var(--blue-500);
    /* box-shadow: 0 8px 40px rgba(11, 113, 221, .5); */
}

.btn-outline,
a.btn-outline {
    background-color: rgba(241, 241, 242, 0);
    border: 1px solid var(--white-soft);
    color: var(--white-soft);
    border-radius: 100px;
    transition: .5s;
}

.btn-outline:hover,
a.btn-outline:hover {
    background-color: rgba(241, 241, 242, 1);
    color: var(--dentalray-blue);
    /* box-shadow: 0 8px 40px rgba(11, 113, 221, .75); */
}


.btn-cta,
a.btn-cta {
    background: var(--white);
    color: var(--dentalray-blue);
    transition: .5s;
}

.btn-cta:hover,
a.btn-cta:hover {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 24px rgba(255, 255, 255, .25);
}

/* Divs */
section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 80px 32px;
    position: relative;
    overflow-x: clip;
}

.divider {
    background: var(--border-light);
    margin: 32px 0;
    padding: 1px 0;
    border-radius: 12px;
}

.dark-bg {
    background-color: var(--dentalray-soft-dark-blue);
}

.section-shadow {
    box-shadow: 0 20px 60px rgba(2, 32, 65, 1);
}

.section-borders {
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    width: 100%;
}

#intro,
#intro-medium {
    position: relative;
    margin-top: 160px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#intro-small {
    margin-top: 100px;
}

#intro-md {
    margin: 0;
    padding: 180px 16px 40px 16px;
}

#contact-intro {
    margin-top: 100px;
}

#refer-intro {
    margin-top: 0;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#intro.schedule {
    padding: 0 1rem 1rem 1rem;
    height: auto;
}

#intro.schedule p {
    font-size: var(--text-small);
    line-height: 2rem;
}

#refer-intro .col {
    gap: 32px;
}

#intro h1,
#intro p {
    text-align: center;
}

#intro p {
    font-size: var(--text-medium);
    line-height: 2.75rem;
    padding-bottom: 1.25rem;
}

#contact-intro p {
    font-size: var(--text-normal);
    line-height: 2rem;
}

/* === Header === */
#headerContainer {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
}

header {
    z-index: 3;
    padding: 24px 32px;
    width: 100%;
}

/* header>.row:last-of-type {
    padding: 24px 32px;
} */

header.refer {
    position: static;
    display: flex;
    justify-content: center;
    padding: 32px;
}

#ray-landing header.refer {
    padding: 32px 16px 0 16px;
}


header .logo {
    justify-content: center;
    margin-right: 24px;
}

header nav {
    display: flex;
    flex-direction: row;
}

header nav ul {
    display: flex;
    flex-direction: row;
    padding: 0;
}

header nav ul li {
    display: flex;
    flex-direction: row;
    margin-right: 8px;
    border-radius: 40px;
    transition: .25s;
}

header nav ul li:nth-of-type(1),
header nav ul li:nth-of-type(3),
header nav ul li:nth-of-type(5) {
    padding-right: 12px;
}

header nav ul li:hover {
    background: rgba(0, 0, 0, .1);
    cursor: pointer;
    color: var(--dentalray-blue) !important;
}

header nav ul li a {
    padding: 12px 16px;
    text-decoration: none;
    color: var(--dark-soft);
    text-decoration: none !important;
    border: none;
    font-weight: 700;
}

header nav ul li a:hover {
    color: var(--dentalray-blue) !important;
}

span.caret {
    position: absolute;
    right: 8px;
    top: 12px;
    transition: .5s;
}

header .account {
    justify-content: center;
}

.submenu {
    display: none;
    flex-direction: column;
    padding: 12px 12px;
    background: var(--light-grey);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    box-shadow: 10px 10px 0 rgba(11, 113, 221, 0.25);
    top: 40px;
    width: 310px;
}

.submenu ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.submenu ul li {
    padding: 12px;
    border-radius: 12px;
}

.submenu ul li:hover {
    background: var(--light-grey-dark);
    transition: .5s;
}

.submenu ul a,
.submenu ul li a {
    padding: 0;
    color: var(--dark-soft);
}

header nav ul li:hover,
.submenu ul li:hover {
    color: var(--dark-soft);
}

.submenu ul li .row {
    gap: 12px;
}

.submenu ul li .row .col {
    gap: 8px;
}

.submenu ul li .row .col.icon {
    position: relative;
    width: 24px;
    overflow: hidden;
}

.height-19 {
    height: 19px;
}

.height-21 {
    height: 21px;
}

.height-23 {
    height: 23px;
}

.top-19,
.top-21,
.top-23 {
    position: absolute;
    top: 0
}

.submenu ul li:hover .top-19 {
    top: -19px;
}

.submenu ul li:hover .top-21 {
    top: -21px;
}

.submenu ul li:hover .top-23 {
    top: -23px;
}

.submenu .subtext {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.05rem;
}


#nav-platform:hover .submenu,
#nav-resources:hover .submenu,
#contact-us:hover .submenu {
    display: flex !important;
    align-items: center;
}

/* #nav-platform:hover .active-nav,
#nav-resources:hover .active-nav,
#contact-us:hover .active-nav {
    color: var(--blue-300);
} */

#nav-platform:hover span.caret,
#nav-resources:hover span.caret,
#contact-us:hover span.caret {
    transform: rotate(180deg);
    color: var(--blue-300);
}

.background-blur {
    background-color: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
    transition: 1s;
}

/* Mobile Menu CSS */
#mobile-nav {
    display: none;
}

.burger-menu-container {
    width: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 20px;
    padding-top: 10px;
    height: 28px;
    margin-top: 10px;
}

.burger-menu-container:hover {
    cursor: pointer;
}

.burger-menu-top,
.burger-menu-middle,
.burger-menu-bottom {
    /* background: var(--white-soft); */
    background: var(--dentalray-dark-blue);
    width: 100%;
    height: 3px;
    left: 0;
    border-radius: 12px;
}

.burger-menu-container:hover .burger-menu-top,
.burger-menu-container:hover .burger-menu-middle,
.burger-menu-container:hover .burger-menu-bottom {
    /* background-color: var(--dentalray-blue); */
    background-color: var(--dentalray-blue);
}

.burger-menu-top {
    top: 0;
    position: absolute;
    transition: .5s;
}

.burger-menu-middle {
    top: 6px;
    position: absolute;
    transition: .5s;
}

.burger-menu-bottom {
    top: 12px;
    position: absolute;
    transition: .5s;
}

.rotate-top,
.rotate-bottom {
    top: 8px;
}

.rotate-top {
    transform: rotate(45deg);
}

.rotate-bottom {
    transform: rotate(-45deg);
}

.mobile-menu {
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(10px);
    /* max-width: 500px; */
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    padding: 100px 0;
    transition: .5s;
    /* box-shadow: 4px 0px 60px 20px rgba(0, 0, 0, .5); */
}

.mobile-menu ul {
    padding: 0 20px;
}

.mobile-menu ul li {
    /* color: var(white) !important; */
    /* color: var(--dark-soft) !important; */
    padding: 12px;
    font-size: 1.25rem;
    line-height: 1.95rem;
    border-radius: 12px;
}

.mobile-menu ul li:hover {
    background: var(--light-grey-dark);
}

.mobile-menu ul li.divider {
    background: var(--border-light);
    margin: 24px 0;
    padding: 1px 0;
    border-radius: 12px;
}

.mobile-menu ul li a {
    color: var(--dark-soft) !important;
    text-decoration: none;
    line-height: 1.45rem;
}

.mobile-menu ul li:hover a {
    color: var(--dark-soft) !important;
    transition: .1s;
}


.mobile-menu ul li a .row {
    gap: 12px;
}

.mobile-menu ul li a .row .col .subtext {
    font-size: 1rem;
}

/* Mobile Menu Accessibility */
#mobile-menu[aria-hidden="true"] {
    /* left: -500px; */
    height: 0;
    padding: 0;
    overflow: hidden;
}

#mobile-menu[aria-hidden="false"] {
    /* left: 0; */
    height: 100vh;
    /* padding: 100px 0; */
}

#mobile-menu[aria-hidden="true"] .col {
    display: none;

}


#mobile-menu[aria-hidden="false"] .col {
    display: block;
    /* opacity: 1; */
    /* transition: 1s; */
}

/* === Bottom CTA === */
.bottom-cta {
    background: var(--light-grey);
    /* background: var(--linear-y-blue-gradient); */
    border: 1px solid var(--border-dark);
    border-radius: 32px;
    padding: 20px;
    gap: 1.1rem;
    height: 244px;
    justify-content: center;
    box-shadow: 20px 20px 0 rgba(11, 113, 221, 0.25);
}

#getCBCT .bottom-cta {
    height: auto;
    padding: 32px;
    background: var(--white-soft);
    gap: 2.5rem;
}


.bottom-cta h2,
.bottom-cta p {
    padding: 0;
    color: var(--white);
}

.bottom-cta p {
    font-size: 1.25rem;
}

.bottom-cta h2 {
    color: var(--dentalray-dark-blue);
    text-align: center;
}

.bottom-cta p {
    color: var(--dark-soft);
    text-align: center;
}

/* === Footer === */
footer {
    display: flex;
    justify-content: center;
    padding: 20px;
    /* background: var(--white); */
    /* background: linear-gradient(0deg, rgba(16, 46, 78, 1) 0%, rgba(16, 48, 78, 0) 100%); */
}

footer #company-info {
    max-width: 410px;
    gap: 12px;
}

footer #company-info p {
    font-size: .9rem;
}

footer .sitemap-header {
    font-weight: 700;
}

footer #legal {
    margin: 40px 0 0 0;
    font-size: 12px;
    /* border-top: 1px solid var(--border-dark); */
}

footer #site-map>.col {
    padding: 0 20px;
    gap: 12px;
}

footer #site-map ul {
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    line-height: 1.3rem;

}

footer #site-map ul li a {
    color: var(--dark-soft);
    border: none;
}

footer #site-map ul li a:hover {
    color: var(--blue-500);
}

footer #legal {
    padding: 32px 0 12px 0;
    font-size: 12px;
}

footer #legal .row ul {
    display: flex;
    align-items: center;
}

footer #site-map ul.social {
    display: flex;
    flex-direction: row;
    gap: 14px;
    font-size: 1.25rem;
    justify-content: center;
    padding: 0 0 0 4px;
}

/* General Classes */
.subheader {
    font-size: var(--text-medium);
    line-height: 2.5rem;
}

/* === Homepage CSS === */
.save-time,
.save-money,
.piece-of-mind {
    width: 32%;
}

#referral-form .save-time,
#referral-form .save-money,
#referral-form .piece-of-mind {
    width: 100%;
    max-width: 700px;
}

#about-dr {
    background: var(--white-soft);
    padding: 32px;
    position: relative;
    margin-top: 250px;
}

#about-dr::before {
    position: absolute;
    top: -260px;
    content: '';
    background: url(../images/home/reports@2x.png) center / contain no-repeat;
    max-width: 660px;
    width: 100%;
    padding: 130px;
}

#home-benefits h4 {
    padding: 12px 0;
}

/* Case Study */
#case-study .card {
    max-width: 996px;
    padding: 0 32px 0 0;
}

#case-study .case-img {
    max-width: 482px;
}

#case-study h4 {
    padding: 0;
}

#how-it-works .row .col,
#ourplatform .row .col {
    max-width: 600px;
}

/* CBCT Deal Page */
#getCBCT #announcement {
    display: none;
}

#getCBCT #cbct-hero {
    background: var(--dentalray-dark-blue);
    color: #fff;
}

#getCBCT #cbct-hero>.container>.row>.col:last-of-type {
    justify-content: center;
}

#getCBCT #cbct-hero .pre-header {
    font-size: var(--text-small);
}

#getCBCT h1 {
    position: relative;
    color: white;
    font-size: var(--text-large);
    line-height: var(--text-xtra-large);
}

#getCBCT #cbct-hero h1 span {
    color: var(--warning-400);
}

#getCBCT #contact-form h1 {
    color: var(--dentalray-dark-blue);
}

#getCBCT h2,
#getCBCT h3 {
    font-family: var(--content-font);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--dark-soft);
    letter-spacing: 2px;
    padding: 0;
}

#getCBCT h2 {
    font-size: 24px;
}

#getCBCT h3 {
    font-size: 20px;
}


#getCBCT h4 {
    padding: 0;
}

.exclusive {
    font-size: .75rem;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1.5px;
}

#getCBCT #howItWorks {
    scroll-margin-top: 80px;
}

#getCBCT .dentalray-logo {
    max-width: 190px;
    width: 100%;
}

#getCBCT .eagle-edge-logo {
    max-width: 768px;
    width: 100%;
}

#getCBCT .thumbnail {
    max-width: 393px;
    width: 100%;
    border: 1px solid var(--border-light);
    transition: .25s;
}

#getCBCT .thumbnail:hover {
    opacity: .5;
    transition: .25s;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 2px var(--blue-500);
}

#getCBCT .learnmore {
    position: relative;
    max-width: 205px;
    width: 100%;
    font-size: 16px;
    justify-content: center;
}

#getCBCT .learnmore>.arrow {
    position: absolute;
    right: 2px;
    top: 0;
    animation-name: point-down;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transition: .5s ease-out;
}

@keyframes point-down {
    0% {
        top: 4px;
    }

    100% {
        top: 0;
    }
}

#getCBCT a>button:hover {
    text-decoration: none;
}

#getCBCT #eagle-edge-details>.col>.col>.card {
    flex-direction: column;
}

#getCBCT #eagle-edge-details>.col>.col>.card>.col {
    width: 100%;
}

#getCBCT #cbctCTA .container {
    max-width: 738px;
}

/* #getCBCT #cbct-hero h1[data-variant="4"] {
    font-size: var(--text-large);
    line-height: var(--text-xtra-large);
} */

/* === Pricing Page === */



section#pricing {
    padding-top: 0;
    padding-bottom: 0;
}

section#pricing-cta {
    padding-top: 0;
}

#pricing h2 {
    padding: 0;
    color: var(--blue-500);
}

#pricing h2 span {
    font-size: 1rem;
    line-height: 1rem;
}

#pricing h5 {
    padding: 0;
}

#pricing .card {
    background: var(--white);
}

#pricing .card .row {
    gap: 12px;
}

#pricing .card .row .col {
    width: 100%;
}

#pricing .feature-col {
    padding: 48px 20px;
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    height: 100%;
}

#pricing .feature-col.recc-service {
    border: 2px solid var(--blue-500);
}

#pricing .feature-col:hover {
    background: var(--white-light);
    box-shadow: 0 8px 40px rgba(11, 113, 221, .25);
    transition: .5s;
}

#pricing .feature-col h3 {
    padding: 4px 0;
    color: var(--dentalray-blue);
}

#pricing li {
    font-weight: 400;
    list-style: none;
    padding: 8px 0;
    font-size: .85rem;
}

#pricing li i {
    color: var(--dentalray-blue);
    margin-right: 4px;
    line-height: 1.05rem;
}

#pricing .upgrade-instructions {
    font-size: 14px;
    line-height: 1.25rem;
}

.disclaimer {
    font-size: .67rem;
    line-height: initial;
}

.disclaimer-report {
    background: var(--white-soft);
    margin-top: 8px;
    padding: 12px;
    border-radius: 8px;
}

#pricing .pricing-cta {
    padding: 60px 0;
}

#pricing .pricing-cta h3 {
    padding: 0;
}

.recommended {
    position: absolute;
    padding: 4px 12px;
    background: var(--blue-500);
    color: var(--white);
    font-size: 14px;
    border-radius: 0 0px 8px 8px;
    text-align: center;
    max-width: 150px;
    top: 0;
    left: calc(50% - 59px);
}


/* === Learn more Module === */

#learn-more .container .row {
    flex-wrap: wrap;
    justify-content: center;
}

#learn-more .container .row>.col {
    flex-wrap: wrap;
    width: 32%;
    overflow: hidden;
    justify-content: space-between;
}

#learn-more .col.learn-more-text {
    padding: 20px 20px 30px 20px;
    width: 100%;
    align-items: flex-start;
}

/* === Testimonials === */
.testimonial-text {
    position: relative;
    font-size: var(--text-small);
    font-weight: 400;
    line-height: 2rem;
}

p.testimonial-text:before {
    content: '';
    background: center / contain no-repeat url("../images/logo/DR-icon.svg");
    padding: 45px;
    position: absolute;
    top: -40px;
    right: 0;
    opacity: .1;

}

/* === Reports === */

#safety-overread h3 {
    font-size: var(--text-small);
}

#safety-overread .reviewed-mobile {
    display: none;
}

#safety-overread li,
#add-ons li,
#iaomt .reviewed li,
#cbct-program li {
    /* font-size: 16px; */
    font-weight: 400;
    padding: 4px 0 4px 20px;
    background: url(/images/logo/DR-icon-8x8.svg) no-repeat 7px 12px transparent;
    list-style-type: none;
    line-height: 1.5rem;
}


.h-disclaimer {
    position: relative;
    color: var(--dentalray-blue);
    cursor: pointer;
}

.h-disclaimer:before {
    opacity: 0;
    position: absolute;
    content: 'Turn around time is not guaranteed and can vary on a per customer basis';
    padding: .5rem;
    background: var(--dark-soft);
    font-family: var(--content-font);
    font-size: .75rem;
    font-weight: 400;
    height: auto;
    line-height: initial;
    width: 250px;
    top: -22px;
    right: -110px;
    border-radius: 12px;
    z-index: 2;
    box-shadow: 0 12px 20px rgba(0, 0, 0, .25);
    color: var(--white);
}

.h-disclaimer:after {
    opacity: 0;
    position: absolute;
    content: ' ';
    background: var(--dark-soft);
    padding: 12px;
    transform: rotate(45deg);
    right: 5px;
    top: 15px;
}


.h-disclaimer:hover:before,
.h-disclaimer:hover:after {
    opacity: 1;
    transition: .25s;
}

.h-disclaimer:hover:before {
    top: -52px;
}

.h-disclaimer:hover:after {
    top: -15px;
}

/* === Sample Reports === */

#report-viewer {
    background: var(--white-soft);
}

#report-viewer #mobile-menu[aria-hidden="true"] {
    left: -500px;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

#report-viewer #mobile-menu[aria-hidden="false"] {
    height: 100vh;
}

#report-viewer #mobile-menu[aria-hidden="true"] .col {
    display: none;

}

#report-viewer #mobile-menu[aria-hidden="false"] .col {
    display: flex;
}


#report-viewer #burger-menu {
    display: none;
}

#report-viewer .burger-menu-top,
#report-viewer .burger-menu-middle,
#report-viewer .burger-menu-bottom {
    background: var(--white-soft);
}

#report-viewer .right-btn-spacer {
    display: none;
    width: 50px;
}

#report-viewer .mobile-menu {
    box-shadow: 0px 8px 24px rgba(0, 0, 0, .1);
    background: rgba(255, 255, 255, 1);
    width: 375px;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    padding: 80px 20px;
    transition: .5s;
}

#report-viewer #report-options {
    font-size: 1rem;
}

#report-viewer .report-type-mobile,
#report-viewer .exit {
    padding: 8px 0 8px 8px;
}

#report-viewer .exit a {
    text-decoration: none;
    color: var(--dark-soft);
}

#report-viewer .report-type-mobile[active-report="true"] {
    color: var(--blue-500);
    border-left: 4px solid var(--blue-500);
}

#report-viewer .report-type-mobile:hover,
#report-viewer .exit:hover {
    background: var(--white-soft);
    cursor: pointer;
}

#report-viewer .report-type-mobile[active-report="true"]:hover {
    background: var(--white);
    cursor: auto;
}

#report-viewer hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--border-light);
}

#report-viewer .section {
    display: flex;
    justify-content: center;
}

#report-viewer h1,
#report-viewer h2,
#report-viewer h3 {
    padding: 0;
}

#report-viewer header {
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

#report-viewer header .row.main-header {
    background: var(--dentalray-dark-blue);
    color: var(--white);
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    padding: 16px;
    height: 70px;
    max-width: 100%;
}


#report-viewer header .viewer-logo {
    max-width: 150px;
}

#report-viewer select {
    position: relative;
    min-width: 220px;
    padding: 8px 20px 8px 8px;
    font-size: 16px;
    border-radius: 4px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('../images/icons/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
}

#report-viewer select::after {
    content: "sdfsdfsdf ";
    background-image: url('../images/icons/chevron-down.svg');
    padding: 8px;
}

#report-viewer .subheader {
    display: flex;
    justify-content: center;
    background: var(--white);
    height: 70px;
    border-bottom: 1px solid var(--border-light);
}

#report-viewer .subheader h4 {
    padding: 20px;
}

#report-viewer #report .container {
    min-height: 100vh;
    background-color: var(--white);
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
}

#report-viewer #signature {
    padding-bottom: 50px;
}

#report-viewer #report .report-content,
#report-viewer #report .loading {
    margin-top: 140px;
    padding: 20px;
}

#report-viewer #report .info p:first-of-type {
    min-width: 150px;
}

#report-viewer #report .info.finding {
    justify-content: end;
}

#report-viewer #report .info.finding p {
    position: relative;
    min-width: 0px;
    margin-right: 4px;
}

#report-viewer #recommendation-0 p,
#report-viewer #recommendation-1 p,
#report-viewer #recommendation-2 p,
#report-viewer #recommendation-3 p {
    position: relative;
    padding-left: 24px;
}

#report-viewer #recommendation-0 p::before,
#report-viewer #recommendation-1 p::before,
#report-viewer #recommendation-2 p::before,
#report-viewer #recommendation-3 p::before {
    position: absolute;
    top: 4px;
    left: 0;
    content: '';
    padding: 10px;
}

#report-viewer #recommendation-0 p::before {
    background: url("/images/icons/recommendations/no-findings.svg") no-repeat;
}

#report-viewer #recommendation-1 p::before {
    background: url("/images/icons/recommendations/interest.svg") no-repeat;
}

#report-viewer #recommendation-2 p::before {
    background: url("/images/icons/recommendations/important.svg") no-repeat;
}

#report-viewer #recommendation-3 p::before {
    background: url("/images/icons/recommendations/critical.svg") no-repeat;
}

#report-viewer .btn-tertiary,
#report-viewer a.btn-tertiary {
    border-radius: 8px;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0);
    color: var(--white);
    transition: .25s;
}

#report-viewer .btn-tertiary:hover,
#report-viewer a.btn-tertiary:hover {
    background-color: rgba(255, 255, 255, .1);
    color: var(--white);
    /* box-shadow: 0 8px 40px rgba(11, 113, 221, .5); */
}

.impression-highlight {
    background: var(--blue-100);
    border-left: 8px solid var(--blue-500);
    padding: 12px;
}

/* === All Scans Page === */
#research h2 {
    position: relative;
    margin-top: 20px;
}

#research h2:before {
    content: 'What our research has found';
    font-size: 20px;
    font-weight: 300;
    position: absolute;
    top: -48px;
}

#research ul {
    padding-top: 12px;
}

#research ul li {
    position: relative;
    padding: 12px 0;
    font-size: 1rem;
    line-height: 1.35rem;
}

#research ul li span {
    font-size: 48px;
    font-weight: 700;
    color: var(--dentalray-blue);
}


#research .card span {
    color: var(--success-400);
    margin-right: 8px;
}


#jump-section {
    min-width: 220px;
}

#jump-section>.col {
    gap: 8px;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 100px;
}

#jump-section ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


#jump-section ul li {
    padding: 12px;
    border-radius: 8px;
}

#jump-section ul li:hover {
    background-color: rgba(11, 113, 221, .25);
    cursor: pointer;
}

#jump-section ul li:first-of-type:hover {
    background-color: rgba(0, 0, 0, 0);
    cursor: auto;
}

#jump-section ul li.active {
    background-color: rgba(11, 113, 221, .25);
}

#jump-section ul li a {
    color: var(--dark-soft);
    text-decoration: none;
}

#liability-page h2 {
    padding: 0 0 20px;
}

#liability-page ol {
    padding-left: 20px;
}

#liability-page ol li {
    padding: 8px 0;
    list-style: decimal;
}

#liability-page span {
    font-size: 12px;
    line-height: 8px;
    vertical-align: super;
    color: var(--dentalray-blue);
}

#case-studies h4 {
    padding: 0;
}

#safety-overread,
#liability,
#research,
#own-scans,
#failure-to,
#fov,
#waiver,
#case-studies,
#conclusion {
    scroll-margin-top: 100px;
}

#OMR-Report,
#cephx-report {
    scroll-margin-top: 200px;
}


/* === Radiologists Page === */

#radiologists ul li {
    position: relative;
    padding: 4px 0 4px 8px;
    line-height: 1.35rem;
    padding-left: 20px;
}

#radiologists ul li:before {
    content: '';
    background: url(../images/logo/DR-icon.svg) no-repeat center;
    padding: 12px;
    background-size: 40%;
    position: absolute;
    left: -4px;
}

#institutions .logos .row {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

#institutions .logos .row li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 250px;
    height: 108px;
}

#our-rads {
    padding: 100px 32px 12px 32px;
}

#our-rads p {
    text-align: center;
}

#logos {
    padding: 20px 0 0 0;
}

/* === Radiologist Logos Marquee ==== */
HTML CSSResult Skip Results Iframe EDIT ON .marquee {
    display: flex;
    block-size: var(--marquee-item-height);
    margin-block: var(--marquee-item-height);
    position: relative;
    overflow-x: hidden;
}

.marquee--3 {
    --marquee-item-width: 150px;
    --marquee-item-height: 150px;
    --marquee-duration: 24s;
    --marquee-items: 3;
    min-height: 150px;
}

.marquee--13 {
    --marquee-item-width: 250px;
    --marquee-item-height: 150px;
    --marquee-duration: 60s;
    --marquee-items: 13;
    min-height: 100px;
}

.marquee__item {
    --marquee-item-offset: max(calc(var(--marquee-item-width) * var(--marquee-items)),
            calc(100% + var(--marquee-item-width)));
    --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
    position: absolute;
    inset-inline-start: var(--marquee-item-offset);
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

.marquee--13 .marquee__item:nth-of-type(1) {
    --marquee-item-index: 1;
}

.marquee--13 .marquee__item:nth-of-type(2) {
    --marquee-item-index: 2;
}

.marquee--13 .marquee__item:nth-of-type(3) {
    --marquee-item-index: 3;
}

.marquee--13 .marquee__item:nth-of-type(4) {
    --marquee-item-index: 4;
}

.marquee--13 .marquee__item:nth-of-type(5) {
    --marquee-item-index: 5;
}

.marquee--13 .marquee__item:nth-of-type(6) {
    --marquee-item-index: 6;
}

.marquee--13 .marquee__item:nth-of-type(7) {
    --marquee-item-index: 7;
}

.marquee--13 .marquee__item:nth-of-type(8) {
    --marquee-item-index: 8;
}

.marquee--13 .marquee__item:nth-of-type(9) {
    --marquee-item-index: 9;
}

.marquee--13 .marquee__item:nth-of-type(10) {
    --marquee-item-index: 10;
}

.marquee--13 .marquee__item:nth-of-type(11) {
    --marquee-item-index: 11;
}

.marquee--13 .marquee__item:nth-of-type(12) {
    --marquee-item-index: 12;
}

.marquee--13 .marquee__item:nth-of-type(13) {
    --marquee-item-index: 13;
}

@keyframes go {
    to {
        inset-inline-start: calc(var(--marquee-item-width) * -1);
    }
}

.size-75 {
    width: 75px;
}

.size-100 {
    width: 100px;
}

.size-120 {
    width: 120px;
}

.size-150 {
    width: 150px;
}

.size-170 {
    width: 170px;
}

.size-175 {
    width: 175px;
}

.size-200 {
    width: 200px;
}

.size-250 {
    width: 250px;
}

.case-studies {
    padding: 20px 0;
}

/* === END ==== */

/* === Study Slider Comparison==== */
#studies {
    background: var(--white-soft);
}

#studies img-comparison-slider {
    --divider-width: 4px;
    --divider-color: var(--white);
    --default-handle-opacity: 1;
    --default-handle-color: #ffffff;
    --default-handle-width: 100px;
    --default-handle-shadow: 5px 5px 5px rgba(0, 0, 0, 1);
}

#studies .row .col {
    max-width: 580px;
    width: 100%;
    padding-bottom: 32px;
}

#studies .row .col .img-container {
    display: flex;
    justify-content: center;
    background: black;
    max-width: 544px;
    width: 100%;
}

#studies .img {
    width: 100%;
}

.coloured-slider {
    --divider-color: var(--warning-500);
    --default-handle-color: var(--warning-500);
}

.custom-animated-handle {
    transition: transform 0.2s;
}

.slider-with-animated-handle:hover .custom-animated-handle {
    transform: scale(1.2);
}

/* === END ==== */


/* === Privacy and Terms === */
#privacy-text h4 {
    font-family: var(--content-font);
    font-weight: 700;
    font-size: 1rem;
}

#privacy-text span {
    text-decoration: underline;
}

#privacy-text strong {
    font-weight: 500;
}

#privacy-text p {
    font-weight: 300;
}

#privacy-text ol,
#privacy-text ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 0 20px;
    font-size: 1rem;
    line-height: 1.35rem;
    font-weight: 300;
}

#privacy-text ol li,
#privacy-text ul li {
    padding: 4px 0 0 20px;
    font-size: 1rem;
    line-height: 1.35rem;
    font-weight: 300;
}

#privacy-text ul li {
    list-style-type: disc;
    padding-left: 12px;
}

#HBAA {
    padding: 2rem 0;
}

/* Contact Forms */

.contact-form {
    max-width: 768px;
    width: 100%;
}


/* === Schedule Installation Page === */

#installation {
    padding-bottom: 200px;
}

#installation .col.instructions {
    max-width: 600px;
    width: 100%;
}

#installation p {
    /* margin-top: 20px; */
    font-size: .9rem;
    line-height: 1.35rem;
}

#installation p:first-of-type {
    margin-top: 0px;
}

#installation ul {
    padding: 12px 0 0 32px;
}

#installation ul li {
    font-size: inherit;
    font-weight: inherit;
    padding: 8px 0;
    list-style-type: number;
}

.warning-text {
    color: var(--warning-300);
}

.help {
    display: none;
    justify-content: end;
    padding: 20px;
}

.calendly-section {
    padding: 0 32px;
}

#expect {
    padding-bottom: 100px;
}


/* 404 */
.general-bt {
    display: inline;
}

/* Radiologist Recruitment Page */
.indent-ul {
    padding-left: 24px;
}

.indent-ul>li {
    list-style-type: disc;
    font-weight: 400;
    padding: 4px;
    line-height: 1.25rem;
}

.indent-ul>li:first-of-type {
    padding-top: 0;
}

/* Landing Pages */
#landing-intro-bg {
    background: rgb(21, 31, 69);
    background: linear-gradient(142deg, rgba(21, 31, 69, 1) 0%, rgba(8, 93, 182, 1) 100%);
    padding: 20px 16px 80px 16px;
}

#landing-intro-bg .goetz-logo {
    max-width: 150px;
}

#landing-intro-bg .subheader {
    color: var(--white);
}

#landing-intro-bg p {
    color: white;
}

#landing-intro-bg span {
    font-size: var(--text-large);
    color: var(--white-light);
    padding: 0 12px;
}


#landing-intro-bg h1 {
    position: relative;
    color: var(--white-light);
}


.img-reports {
    width: 100%;
}

#hb-form {
    min-height: 830px;
}

#hb-form .contact-form {
    padding: 12px 32px;
    position: absolute;
    top: -40px;
    background: var(--white);
    border-radius: 16px;
}

#lp-details ul {
    padding: 20px 8px;
}

#lp-details li {
    list-style-type: none;
    position: relative;
    padding: 8px 0 8px 16px;
    line-height: 1.25rem;
}

#lp-details li::before {
    position: absolute;
    left: -8px;
    content: '';
    background: center no-repeat url("../images/icons/favicon/favicon-16x16.png");
    padding: 8px;
}

#auto-benefits {
    padding-top: 0;
    padding-bottom: 100px;
}


#ray-landing section,
#prexion-landing section {
    padding: 0 16px;
}

#ray-landing .container,
#prexion-landing .container {
    max-width: 1440px;
}

#ray-landing #hero,
#prexion-landing #hero {
    background: var(--white);
}

#ray-landing #hero .container .row>.col:first-of-type,
#prexion-landing #hero .container .row>.col:first-of-type {
    width: 100%;
}


.ray-header {
    font-size: var(--text-large);
    padding: 8px 0;
    line-height: 3.25rem;
    max-width: 838px;
}

.main-header {
    position: relative;
    font-size: 3.15rem;
    padding: 8px 0;
    line-height: 4.25rem;
    max-width: 838px;
}

#prexion-landing .main-header:before {
    content: 'Get Up To';
    font-size: 1.5rem;
    position: absolute;
    top: -52px;
}

#ray-landing .logos,
#prexion-landing .logos {
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#ray-landing .logo-ray {
    width: 250px;
}

#prexion-landing .prexion-logo {
    max-width: 180px;
    width: 100%;
}

#ray-landing .logo-dr {
    width: 250px;
}

#prexion-landing .logo-dr {
    max-width: 200px;
    width: 100%;
}

#ray-landing .subheader,
#prexion-landing .subheader {
    font-size: var(--text-small);
    line-height: 2.5rem;
}

#ray-landing .card,
#prexion-landing .card {
    padding: 20px;
    border: 1px solid var(--border-light);
}

/* #prexion-landing .card {
    padding: 32px;
} */

.card-light {
    background: white;
}

#ray-landing .steps,
#prexion-landing .steps {
    min-width: 70px;
    font-weight: 700;
}

#ray-landing .step-text,
#prexion-landing .step-text {
    flex-grow: 2;
}

#ray-landing #instructions,
#prexion-landing #instructions {
    position: relative;
}

#ray-landing .img-container,
#prexion-landing .img-container {
    max-width: 528px;
    z-index: 1;
}

#ray-landing .cbct-img,
#prexion-landing .cbct-img {
    max-width: 528px;
}

#ray-landing .dark-bg,
#prexion-landing .dark-bg {
    background-image: url("/images/landing-pages/dark-bg.jpg");
    background-size: cover;
    background-color: var(--dark-black);
    height: 180px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 0;
}

#ray-landing #studies,
#prexion-landing #studies {
    background-image: url("/images/landing-pages/dark-bg.jpg");
    background-size: cover;
    background-color: var(--dark-black);
    padding: 20px;
}

#ray-landing #studies .row .col,
#prexion-landing #studies .row .col {
    max-width: 560px;
}

#ray-landing #studies h3,
#ray-landing #studies p,
#prexion-landing #studies h3,
#prexion-landing #studies p {
    color: var(--white);
    text-align: center;
}

#ray-landing #contact-us-link,
#prexion-landing #contact-us-link {
    cursor: pointer;
}

#ray-landing .disclaimer,
#prexion-landing .disclaimer {
    font-size: 14px;
    color: white;
    padding-top: 16px;
}

#prexion-landing .disclaimer {

    text-align: center;
}

#ray-landing .disclaimer>a {
    cursor: pointer;
    color: var(--warning-600);
}

#ray-landing .disclaimer a:hover {
    cursor: pointer;
    color: var(--warning-700);
}

.divider-el {
    width: 80px;
    height: 12px;
    background: var(--blue-500);
    border-radius: 50px;
}

.chip {
    background: var(--blue-100);
    color: var(--blue-500);
    border: 1px solid var(--blue-500);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 24px;
    font-weight: 700;
}

.chip-subtle {
    background: var(--white-soft);
    color: var(--grey-normal);
    border: 1px solid var(--border-light);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 24px;
    font-weight: 700;
}

#ray-landing ol,
#prexion-landing ol {
    padding-left: 20px;
}

#ray-landing ol li,
#prexion-landing ol li {
    list-style-type: decimal;
    padding: 4px 0;
    line-height: 1.25rem;
}

#ray-landing ol li:first-of-type,
#prexion-landing ol li:first-of-type {
    padding-top: 0;
}

#ray-landing .testimonial-text,
#prexion-landing .testimonial-text {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

#ray-landing #testimonials,
#prexion-landing #testimonials {
    padding: 80px 20px;
}

#ray-landing [data-testimonial-count="1"],
#ray-landing [data-testimonial-count="2"],
#ray-landing [data-testimonial-count="3"],
#lp-utah-dental [data-testimonial-count="1"],
#lp-utah-dental [data-testimonial-count="2"],
#lp-utah-dental [data-testimonial-count="3"],
#prexion-landing [data-testimonial-count="1"],
#prexion-landing [data-testimonial-count="2"],
#prexion-landing [data-testimonial-count="3"] {
    background: white;
    max-width: 375px;
    padding: 20px;
    border: 1px solid;
    border-color: var(--border-light);
    border-radius: 16px;
    transition: .25s ease-out;
}

#ray-landing [data-testimonial-count="1"]:hover,
#ray-landing [data-testimonial-count="2"]:hover,
#ray-landing [data-testimonial-count="3"]:hover,
#lp-utah-dental [data-testimonial-count="1"]:hover,
#lp-utah-dental [data-testimonial-count="2"]:hover,
#lp-utah-dental [data-testimonial-count="3"]:hover,
#prexion-landing [data-testimonial-count="1"]:hover,
#prexion-landing [data-testimonial-count="2"]:hover,
#prexion-landing [data-testimonial-count="3"]:hover {
    background: var(--white-light);
    box-shadow: 0 0 12px 4px rgba(11, 113, 221, .25);
    transition: .25s ease-in;
}


/* Update Page Anchor Links */
#jun242024,
#aug292024,
#cbct-form {
    scroll-margin-top: 150px;
}

/* Custom Modals */
.overlay {
    display: flex;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, .75);
    height: 100vh;
    width: 100vw;
    padding: 20px;
    justify-content: center;
    transition: .25s;
    overflow-y: scroll;
}

.modal {
    position: absolute;
    width: 100%;
}


#ray-landing .modal.card,
#prexion-landing .modal.card,
#getCBCT .modal.card {
    background: var(--white);
    padding: 12px 20px;
    max-width: 768px;
}

#iaomt .cta-banner {
    background: var(--dentalray-dark-blue);
    padding: 1.5rem 1rem;
    color: white;
}

#iaomt header.refer {
    padding: 16px;
}


#iaomt .cta-banner .offer {
    font-weight: 700;
    font-size: 1.5rem;
}

#getCBCT nav {
    background-color: var(--dentalray-dark-blue);
    padding: 1.25rem 0;
    position: sticky;
    top: 0;
    z-index: 3;
    /* border-top: 1px solid var(--border-dark); */
    border-bottom: 1px solid var(--border-dark);
}

#getCBCT nav ul {
    padding: 0;
}


#getCBCT nav ul li a {
    color: white;
    padding: 4px 8px;
    text-decoration: none;
    font-weight: 400;
    padding: 8px 16px;
    border-radius: 40px;
}

#getCBCT nav ul li a:hover {
    background-color: rgba(255, 255, 255, .25);
}

#getCBCT .form-div {
    max-width: 698px;
    width: 100%;
}

/* Announcement Banner */
#announcement {
    background-color: var(--dentalray-blue);
    color: white;
    padding: 12px 16px;
    overflow: hidden;
    height: auto;
    transition: .25s;
    /* position: fixed;
    top: 0; */
    width: 100%;
    z-index: 3;
}

#announcement:hover {
    background-color: var(--blue-600);
    transition: .25s;
}

#announcement a {
    color: var(--warning-300);
    transition: .25s;
}

#announcement a:hover {
    color: var(--warning-400);
    transition: .25s;
}


/* ==== Accordion ==== */
.acc-container {
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    box-shadow: 12px 12px 0 rgba(11, 113, 221, .25);
    overflow: auto;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.75rem;
    color: var(--dark-soft);
    cursor: pointer;
    padding: 20px 60px 20px 16px;
    width: 100%;
    text-align: left;
    border-top: 1px solid var(--border-dark);
    outline: none;
    transition: 0.4s;
    position: relative;
}

.accordion:first-of-type {
    border: none;
}

.accordion-icon {
    position: absolute;
    right: 20px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion.active,
.accordion:hover {
    background-color: var(--white-soft);
    color: var(--dentalray-blue);
}

.accordion.active>.accordion-icon {
    transform: rotate(180deg);
}



/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0;
    font-size: 1rem;
    background: var(--white-soft);
    color: var(--dark-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#getCBCT #program-details {
    padding-top: 0;
}

#getCBCT #program-details ul {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 40px 0;
}

#getCBCT #program-details li {
    max-width: 572px;
    width: 100%;
}

#getCBCT #program-details li>.accordion-border {
    margin-top: 16px;
    height: 1px;
    background: var(--border-light)
}

#getCBCT #fprogram-detailsaq .accordion {
    height: 37px;
    padding: 0;
}

#getCBCT #program-details .accordion.active,
#getCBCT #program-details .accordion:hover {
    background: none;
}


#getCBCT #program-details .accordion.active {
    color: var(--dark-soft);
}

#getCBCT #program-details .accordion.active:hover {
    color: var(--dentalray-blue);
}

#getCBCT #program-details .panel {
    background: none;
    padding: 0 16px 0 16px
}

#getCBCT .vid-container {
    display: flex;
    justify-content: center;
}

#getCBCT .vid-container>iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

#getCBCT .cbct-hero {
    background-color: var(--dentalray-dark-blue);
}

#getCBCT .cbct-hero .logo {
    padding: 0 16px;
    max-width: 600px;
    padding-bottom: 32px;
}

.scroll-right {
    display: none;
    font-size: 13px;
    padding-top: 5px;
}

/* Div table */
table {
    width: 100%;
    font-family: var(--content-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--dark-soft);
}

tr {
    border-bottom: 1px solid var(--border-light);
}

tr:nth-of-type(even) {
    background: var(--white-soft);

}

tr:nth-of-type(2) {
    background: var(--warning-100);
    font-weight: 500;
}

th,
td {
    text-align: left;
    padding: 16px 8px;
}

#getCBCT th:first-of-type,
#getCBCT th:nth-of-type(2),
#getCBCT th:last-of-type,
#getCBCT td:first-of-type,
#getCBCT td:nth-of-type(2),
#getCBCT td:last-of-type {
    width: 176px
}

.div-table-cell.expanded {
    flex: 0 1 176px
}


/* Guide Tooltips */
.guide-bubble {
    position: absolute;
}

.guide-bubble-reports {
    position: absolute;
    top: 76px;
    max-width: 280px;
    right: 16px;
    display: none;
    opacity: 0;
    transition: .25s ease-out;
}

.guide-arrow {
    position: absolute;
    top: -6px;
    right: 40px;
    background: var(--dark-black);
    width: 16px;
    height: 16px;
    rotate: 134deg;
}

.guide-container {
    background: var(--dark-black);
    padding: 20px;
    border-radius: 16px;
    /* font-size: 14px; */
    color: white;
    box-shadow: 0 0 12px rgba(0, 0, 0, .75)
}


.btn-guide,
a.btn-guide {
    background-color: rgba(255, 255, 255, 0);
    color: white;
    transition: .25s;
    padding: 8px 16px;
}

.btn-guide:hover,
a.btn-guide:hover {
    background-color: rgba(255, 255, 255, .15);
    /* box-shadow: 0 8px 40px rgba(11, 113, 221, .5); */
}

section#promo {
    padding: 16px;
    background: var(--dentalray-dark-blue);
    color: white;
    position: sticky;
    top: 0;
    z-index: 2;
}

section#promo a {
    color: var(--warning-400);
}

section#promo a:hover {
    color: var(--warning-600);
}



/* ==== Utility Classes === */

.bg-soft-white {
    background: var(--white-soft);
}

.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: .25;
}

.opacity-50 {
    opacity: .5;
}

.opacity-75 {
    opacity: .75;
}

.opacity-100 {
    opacity: 1;
}

.flex {
    display: flex;
}

.row {
    display: flex;
    flex-direction: row;
}

.row.wrap {
    flex-wrap: wrap;
}

.col {
    display: flex;
    flex-direction: column;
}

.col-3 {
    width: 32%;
}

.col-4 {
    width: 25%;
}

.col-6 {
    width: 50%;
}

.col-8 {
    width: 75%;
}

.col-12 {
    width: 100%;
}

.col-3-fixed {
    max-width: 385px;
    width: 100%;
}

.col-4-fixed {
    max-width: 276px;
    width: 100%;
}

.col-reports {
    width: 30%;
}

.wrap {
    flex-wrap: wrap;
}

.grow-1 {
    flex-grow: 1;
}

.grow-2 {
    flex-grow: 2;
}

.grow-3 {
    flex-grow: 3;
}

.shrink-2 {
    flex-shrink: 2;
}

.shrink-3 {
    flex-shrink: 3;
}

.shrink-4 {
    flex-shrink: 4;
}

.gap-8 {
    gap: 8px 8px;
}

.gap-12 {
    gap: 12px 12px;
}

.gap-16 {
    gap: 16px 16px;
}

.gap-20 {
    gap: 20px 20px;
}

.gap-32 {
    gap: 32px 32px;
}

.gap-40 {
    gap: 40px 40px;
}

.gap-48 {
    gap: 48px 48px;
}

.gap-60 {
    gap: 60px 60px;
}

.gap-80 {
    gap: 80px 80px;
}

.gap-100 {
    gap: 100px 100px;
}

.marg-y-12 {
    margin: 12px 0;
}

.marg-b-20 {
    margin-bottom: 20px;
}

.pad-0 {
    padding: 0px;
}

.pad-20 {
    padding: 20px;
}

.pad-30 {
    padding: 30px;
}

.pad-40 {
    padding: 40px;
}

.pad-60 {
    padding: 60px;
}

.pad-80 {
    padding: 80px;
}

.pad-100 {
    padding: 100px;
}

.pad-x-8 {
    padding: 0 8px;
}

.pad-x-16 {
    padding: 0 16px;
}

.pad-x-20 {
    padding: 0 20px;
}

.pad-y-12 {
    padding: 12px 0;
}

.pad-y-20 {
    padding: 20px 0;
}

.pad-y-32 {
    padding: 32px 0;
}

.pad-y-40 {
    padding: 40px 0;
}

.pad-y-80 {
    padding: 80px 0;
}

.pad-y-100 {
    padding: 100px 0;
}

.pad-b-20 {
    padding: 0 0 20px 0;
}

.pad-b-100 {
    padding-bottom: 100px;
}

.pad-t-12 {
    padding: 12px 0 0 0;
}

.pad-t-20 {
    padding: 20px 0 0 0;
}

.pad-t-40 {
    padding: 40px 0 0 0;
}

.pad-t-60 {
    padding: 60px 0 0 0;
}

.justify-center {
    justify-content: center;
}

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-end {
    justify-content: end;
}

.align-content-center {
    align-content: center;
}

.align-content-end {
    align-content: end;
}

.align-item-center {
    align-items: center;
}

.alighn-item-end {
    align-items: end;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-emphasis {
    font-family: var(--content-font);
    font-weight: 700;
    color: var(--blue-500);
}

.text-all-caps {
    text-transform: uppercase;
}


.text-size-emphasis {
    font-size: 24px;
    line-height: 1.75rem;
}

.text-subtle {
    font-size: 400;
    color: var(--border-dark);
}

.letter-space-15 {
    letter-spacing: .15rem;
}

.border-emphasis {
    border: 2px solid var(--blue-600) !important;
}

.width-33 {
    width: 33.33%;
}

.width-48 {
    width: 48%;
}

.width-100 {
    width: 100%;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

.display-flex {
    display: flex;
}

.min-height-300 {
    min-height: 300px;
}

.max-800 {
    max-width: 800px;
}

.max-768 {
    max-width: 768px;
}

.max-500 {
    max-width: 500px;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.z-index-4 {
    z-index: 4;
}

.overflow-hide {
    overflow: hidden;
}

.tooltip {
    position: absolute;
    background: var(--dark-soft);
}

.tooltip .content {
    position: relative;
    padding: .5rem;
    font-family: var(--content-font);
    font-size: .75rem;
    font-weight: 400;
    height: auto;
    line-height: initial;
}

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}


/* Skeletong Loader */
.skeleton-container {
    position: relative;
    background: var(--light-grey);
    height: 20px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

@keyframes skeleton-gradient {
    0% {
        left: -30%;
        /* opacity: 0; */
    }

    100% {
        left: 100%;
        /* opacity: 1; */
    }
}

.skeleton-loading {
    background: rgb(213, 213, 213);
    background: linear-gradient(90deg, rgba(213, 213, 213, 0) 0%, rgba(208, 208, 208, 1) 50%, rgba(213, 213, 213, 0) 100%);
    width: 150px;
    height: 20px;
    position: absolute;
    /* transition: 5s; */
    animation-name: skeleton-gradient;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}