body {
	font-family: 'Figtree', Roboto, system-ui, -apple-system, sans-serif;
	place-items: center;
}

html, body {
	margin:0;
	padding: 0;
	overflow-x: hidden;
}

::-moz-selection {
	color: #000;
	background: yellow;
}

::selection {
	color: #000;
	background: yellow;
}

:focus {
	outline: 1px dotted var(--black) !important;
	border-radius: 3px;
}

:root {
	--brand-blue: #394dfe;
	--brand-blue-hover: #2C397F;
	--bs-link-color: var(--brand-blue);	
	--bs-primary-rgb: var(--brand-blue);
	--bs-btn-hover-color: var(--brand-blue-hover);
	--bs-btn-color: var(--brand-blue);	
	--bs-btn-hover-bg: 57, 77, 254;
	--bs-btn-border-color: 57, 77, 254;
	--bs-btn-active-bg: 57, 77, 254;
	--bs-btn-active-border-color: 57, 77, 254;
	--hoverBlue: #F0F5FF;
	--brandborder: #9BA4DA;
	--tealWhite: #ecf4f4;
	--teal: #24959A;
	--text-dark-teal: #0c494b;
	--teal-greyish: #e4e9e9;
	--hoverRed: #fff0f0;
	--mildCoffee: #f8f4ed;
	--black: #020202;
	--white: #ffffff;
	--bs-nav-pills-link-active-bg: var(--brand-blue);	
    --blue-greyish: rgba(63, 81, 181, 0.08);
	--bs-border-color:rgba(0,0,0,.05);
	--bg-yellow-cream:#FDF5D8;
	--bg-dull-blue:#E3F2FB;
	--bg-peach:#FDE5D8;
	--bg-bright-teal:#EBFEF9;
	--bg-bright-green:#e3fce8;
	--bg-bright-light-purple:#E9DEF8;
	--bg-bright-pink:#ffeff5;
}


.nav-link{
	font-family: 'Barlow', sans-serif;
}

.navbar-nav .nav-link {
	color: var(--brand-blue);
}

.navbar-nav a.nav-link:hover {
	color: var(--black);
}

.navbar-brand{
	display: flex;
}

@keyframes fall {
    0% { top: -50px; }
    100% { top: 100vh; }
}

.clockwise {
    animation-name: fall, spin-clockwise;
}

.counterclockwise {
    animation-name: fall, spin-counterclockwise;
}

@keyframes spin-clockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-counterclockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.pointer:hover {
	cursor: pointer;
}

.overflow-hidden {
	overflow: hidden;
}

.overflow-overlay {
	overflow: overlay;
}

.navbar-nav .dropdown:hover .dropdown-menu {
	display: block;
	margin-top: 0;
}

/*COLORS*/
.text-primary {
	color: var(--brand-blue) !important;
}

.text-teal {
	color: var(--teal) !important;
}

.text-warning{
	color: #f96132 !important;
}

.text-success{
	color: #389e0d !important;
}


.bg-white-opacity{
	background-color: rgba(255,255,255,.5);
}

.bg-dark-gradient {
	background: -o-linear-gradient(54deg, rgba(43,178,184,1) 0%, rgba(29,50,204,1) 62%, rgba(43,178,184,1) 100%);
	background: linear-gradient(36deg, rgba(43,178,184,1) 0%, rgba(29,50,204,1) 62%, rgba(43,178,184,1) 100%);
}

.bg-teal-greyish {
	background-color: var(--teal-greyish) !important;
}

.bg-teal-light-gradient {
	background: rgb(226 235 236);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(226 235 236)), to(rgba(236,244,244,1)));
	background: -o-linear-gradient(top, rgba(226 235 236) 0%, rgba(236,244,244,1) 100%);
	background: linear-gradient(180deg, rgba(226 235 236) 0%, rgba(236,244,244,1) 100%);
}

.bg-white-fading-gradient{
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.bg-yellow-cream{
	background-color: var(--bg-yellow-cream);
}

.bg-dull-blue{
	background-color: var(--bg-dull-blue);
}

.bg-peach{
	background-color: var(--bg-peach);
}

.bg-bright-teal{
	background-color: var(--bg-bright-teal);
}

.bg-bright-green{
	background-color: var(--bg-bright-green);
}

.bg-bright-light-purple{
	background-color: var(--bg-bright-light-purple);
}

.bg-bright-pink{
	background-color: var(--bg-bright-pink);
}

img.blend-darken{
	mix-blend-mode:darken;
}


.text-teal-bright {
	color: #16aab1 !important;
}

.text-teal-neon{
	color: #46FFFF;
}


.mn{
	margin-top: -64px;
}

.navbar.bg-gradient-app.fixedtop {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-image: -o-linear-gradient(118deg, #5da8b3e0 50%, #0711d8e8 100%);
	background-image: linear-gradient(332deg, #5da8b3e0 50%, #0711d8e8 100%);
}

.bg-primary-blue{
	background: var(--brand-blue);
}

.bg-gradient-apptheme {
	background-image: -o-linear-gradient(118deg, #2299ad 50%, #0711D8 100%);
	background-image: linear-gradient(332deg, #2299ad 50%, #0711D8 100%);
}

.bg-gradient-light {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(57, 77, 254, 0.1)), to(rgba(49, 182, 188, 0.1)));
    background-image: -o-linear-gradient(top, rgba(57, 77, 254, 0.1) 0%, rgba(49, 182, 188, 0.1) 100%);
    background-image: linear-gradient(180deg, rgba(57, 77, 254, 0.1) 0%, rgba(49, 182, 188, 0.1) 100%);
}

.border-gradient {
	border: double 2px transparent;
	border-radius: 6px;
	background-image: -o-linear-gradient(white, white),  -o-linear-gradient(left, #2299ad, #0711D8);
	background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(white)),  -webkit-gradient(linear, left top, right top, from(#2299ad), to(#0711D8));
	background-image: linear-gradient(white, white),  linear-gradient(to right, #2299ad, #0711D8);
	background-origin: border-box;
	background-clip: content-box, border-box;
}
  

.free-box{
	background: -o-linear-gradient(231deg, rgb(226 228 246 / 76%) 1.08%, rgb(255 255 255) 88.92%); background: linear-gradient(219deg, rgb(226 228 246 / 76%) 1.08%, rgb(255 255 255) 88.92%);
  }

.brandborder{
	border-color: #53585821 !important;
}

.border-primary{
	border-color: var(--brand-blue) !important;
}

.border-teal{
	border-color: var(--teal) !important;
}

.border-top-left-radius {
border-top-left-radius: 0.5rem;
}

.border-top-right-radius {
border-top-right-radius: 0.5rem;
}

.border-bottom-right-radius {
border-bottom-right-radius: 0.5rem;
}

.border-bottom-left-radius {
border-bottom-left-radius: 0.5rem;
}



.bg-hover-blue{
	background-color: #F0F5FF !important;
}

blockquote .border-start {
	border-color: rgba(56,57,157,.16);
}

.feature-cta:hover{
	background-color: #fff;
	cursor: pointer;
	
}

.avatar {
	width: 150px;
}

.bg-teal {
	background-color: var(--teal);
}

.bg-teal-bright{
background-color:#039FA6 !important;
}

.bg-teal-bright.border{
	border-color:#039FA6;
}

.bg-teal-light {
	background-color: var(--tealWhite);
}

.bg-black {
	background-color: var(--black);
}

.bg-hover-red {
	background-color: var(--hoverRed);
}

.bg-mildcoffee {
	background-color: var(--mildCoffee);
}

.hover-effect:hover {
	opacity: .9;
}

.hover-blue:hover{
	background-color: var(--hoverBlue);
}

h1 .hover-effect:hover{
	color: var(--brand-blue)  !important;
}


.os-mark {
	background: rgb(0,0,0);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 19%, rgba(0,0,0,1) 19%, rgba(0,0,0,1) 98%, rgba(0,0,0,0) 98%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(19%, rgba(255,255,255,0)), color-stop(19%, rgba(0,0,0,1)), color-stop(98%, rgba(0,0,0,1)), color-stop(98%, rgba(0,0,0,0)));
	background: linear-gradient(180deg, rgba(255,255,255,0) 19%, rgba(0,0,0,1) 19%, rgba(0,0,0,1) 98%, rgba(0,0,0,0) 98%);
	color: #ffffff;
	position: relative;
	-webkit-transition: ease-in-out all .5s;
	-o-transition: ease-in-out all .5s;
	transition: ease-in-out all .5s;
}

.os-mark:hover {
	background: rgb(255,255,255);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 19%, rgba(255,255,255,1) 19%, rgba(255,255,255,1) 98%, rgba(255,255,255,0) 98%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(19%, rgba(255,255,255,0)), color-stop(19%, rgba(255,255,255,1)), color-stop(98%, rgba(255,255,255,1)), color-stop(98%, rgba(255,255,255,0)));
	background: linear-gradient(180deg, rgba(255,255,255,0) 19%, rgba(255,255,255,1) 19%, rgba(255,255,255,1) 98%, rgba(255,255,255,0) 98%);
	color: var(--color-contrast-higher,#0d1317) !important;
	-webkit-transition: ease-in-out all .2s;
	-o-transition: ease-in-out all .2s;
	transition: ease-in-out all .2s;
}

.os-community-cta{
	position: relative;
}

.os-community-cta:before{
	display: none;
	content: '';
	min-height: 200px;
	background-size: 100%;
	background-repeat: no-repeat;
}

.or-community{
	margin-bottom: -30px;
}

.os-community-cta .border-gradient {
	min-width: 330px;
}

.e-book-block:hover{
background-color: var(--tealWhite);
}





/*FONTS & TEXT*/
h1,h2,h3,h4,h5,h6 {
	font-family: 'Bricolage Grotesque', 'Barlow', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	font-weight: 700;
	color: var(--black);
}

h1.display-4 {
	letter-spacing: -1.6px;
	position: relative;
	line-height: 62px;
	font-weight: 700;
}

h2 {
	font-size: 3rem;
}


.display-4 span.text-shadow em {
	margin-right: 1rem;
	margin-left: 1rem;
	font-style: normal;
}

.display-4 span.text-shadow {
	border-bottom: 4px solid transparent;
	-o-border-image: url(../images/highligh-text.svg) 30 stretch;
	border-image: url(../images/highligh-text.svg) 30 stretch;
}

.middot-seperator{
	font-size: 30px;
	color:#999;
	line-height: 8px;
	margin-left: .2rem;
	margin-right: .2rem;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
}

.text-shadow {
	text-shadow: 2px 4px #000000;
}

.a-learnmore {
	font-family: 'Barlow', sans-serif;
	border-bottom: none;
	font-weight: 500;
	letter-spacing: normal;
	display: inline-block;
	margin-bottom: 0;
	position: relative;
}

.a-learnmore:hover {
	color: var(--brand-blue) !important;
}

.a-learnmore::before {
	border-bottom: 2px solid var(--brand-blue);
	-webkit-transition: width 220ms cubic-bezier(.165,.84,.44,1);
	-o-transition: width 220ms cubic-bezier(.165,.84,.44,1);
	transition: width 220ms cubic-bezier(.165,.84,.44,1);
	position: absolute;
	bottom: -2px;
	width: 0;
	content: "";
}

.a-learnmore:hover::before {
	width: 100%;
}

.a-learnmore:after {
	content: '\2192';
	vertical-align: middle;
	margin-left: .2rem;
}

.text-underline-dotted, .text-decoration-dotted, .dotted-underline{
	border-bottom: 1px dotted;
	-webkit-text-decoration-style: dotted;
	        text-decoration-style: dotted;
}

h1 .text-decoration-dashed, h1 .text-decoration-dotted{
	text-decoration-thickness: 1px;
}

:disabled{
	cursor:not-allowed;
}



.lead {
	font-weight: 400;
}

.lead.lead-large {
	font-size: 1.26rem;
}

.fw-semibold{
	font-weight: 600;
}

.text-medium {
	font-weight: 500;
}

.comp-description {
	font-size: 13px !important;
}

td {
	font-size: 1rem;
}

td i.text-danger {
	color: #ca7583 !important;
}

.table-striped-columns>:not(caption)>tr>:nth-child(2n) {
	--bs-table-accent-bg: #f9f9f9;
}

.table>:not(caption)>*>* {
	background-color: transparent;
}

.table-hover>tbody>tr:hover>th {
	--bs-table-accent-bg: transparent !important;
}

tr.comparison-actions:hover>* {
	--bs-table-accent-bg: transparent !important;
}

table tr, table td {
	border-color: var(--bs-table-border-color);
	--bs-table-border-color: rgb(85 101 101 / 6%) !important;
}

.table-hover>tbody>tr {
	-webkit-transition: all ease-in-out 1s;
	-o-transition: all ease-in-out 1s;
	transition: all ease-in-out 1s;
}

.table-hover > tbody > tr:hover > * {
	background-color: rgb(243, 243, 255);
  }

table td i {
	font-size: 1.4rem;
}

table td i.bi-question-circle-fill {
	font-size: 13px;
	color: rgba(0,0,0,.4);
}

table td a svg {
	vertical-align: sub;
	margin-right: .5rem;
}

.no-border-left td:first-child, .no-border-left th:first-child  {
    border-left: none !important;
  }
  
  .no-border-right td:last-child, .no-border-right th:last-child{
    border-right: none !important;
  }

#session-replay-guide p{
	font-size: 1.2rem;

}

#session-replay-guide h3{
	font-weight: 700;

}

#session-replay-guide h1, #session-replay-guide h3, #session-replay-guide h4, .guide-menu li a{
	text-transform: capitalize;
}

#session-replay-guide h4{
	font-weight: 500;
	margin-top: 2rem;
}

#session-replay-guide li strong{
	font-weight: 700;
}


.bd-layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-column-gap: 1rem;
	   -moz-column-gap: 1rem;
	        column-gap: 1rem;
}

.bd-sidebar{
	grid-area:sidebar;
    position: sticky;
}

.bd-main {
    grid-area: main;
}



.guide-menu{
	max-width: 280px;
}

.guide-menu li{
	padding: .5rem;
	display: block;
}

.guide-menu li.active{
	background-color: rgba(57, 77, 255, 0.1);
	border-radius: .25rem;
}

.guide-menu li a{
	color: inherit;
	text-decoration: none;
	display: block;
	font-size: 1rem;
}

.guide-menu li a:hover{
	color: var(--brand-blue);
	text-decoration: underline;
}

.guide-menu li.active a{
	color: var(--brand-blue);
	text-decoration: none;
	font-weight: 700;
}

.guide-menu li.ms-3{
	font-size: 13px;

}

li.child-item.fw-bold{
	background-color: rgba(57, 77, 255, 0.05);
	border-radius: 4px;
	color: #30307e;
}


.bg-blue-greyish{
	background-color: var(--blue-greyish);
}

.bg-blue-mesh{
background-color:var(--blue-greyish);
background-image:
-o-radial-gradient(at 63% 68%, hsla(240,58%,86%,1) 0px, transparent 50%),
-o-radial-gradient(at 95% 22%, hsla(256,100%,96%,1) 0px, transparent 50%),
-o-radial-gradient(at 26% 29%, hsla(0,100%,100%,1) 0px, transparent 50%),
-o-radial-gradient(at 4% 5%, hsla(240,0%,100%,1) 0px, transparent 50%),
-o-radial-gradient(at 26% 67%, hsla(0,100%,100%,1) 0px, transparent 50%);
background-image:
radial-gradient(at 63% 68%, hsla(240,58%,86%,1) 0px, transparent 50%),
radial-gradient(at 95% 22%, hsla(256,100%,96%,1) 0px, transparent 50%),
radial-gradient(at 26% 29%, hsla(0,100%,100%,1) 0px, transparent 50%),
radial-gradient(at 4% 5%, hsla(240,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 26% 67%, hsla(0,100%,100%,1) 0px, transparent 50%);
}

.bg-teal-mesh{
	background-color:hsla(0,0%,100%,1);
	background-image:
	-o-radial-gradient(at 55% 3%, hsla(240,0%,100%,1) 0px, transparent 50%),
	-o-radial-gradient(at 50% 98%, hsla(167,32%,77%,1) 0px, transparent 50%);
	background-image:
	radial-gradient(at 55% 3%, hsla(240,0%,100%,1) 0px, transparent 50%),
	radial-gradient(at 50% 98%, hsla(167,32%,77%,1) 0px, transparent 50%);
}

.br-tl{
	border-top-left-radius: .25rem;
}

.br-tr{
	border-top-right-radius: .25rem;
}

.br-bl{
	border-bottom-left-radius: .25rem;
}

.br-br{
	border-bottom-right-radius: .25rem;
}

.text-sm {
	font-size: 12px;
	color: rgba(0,0,0,.4);
}

.card-title svg {
	margin-right: .5rem;
	vertical-align: top;
}


.navbar {
	z-index: 99;
}

.navbar.bg-light {
	background-color: rgba(255,255,255,.95) !important;
}

.navbar-nav .dropdown-item, .navbar-nav .dropdown-menu {
	width: 100%;
	top: 3.2rem;
	margin: .5rem .2rem;
}

.navbar-nav .dropdown-item, .navbar-nav .dropdown-item {
	white-space: normal;
	margin-left: .5rem;
	margin-right: .5rem;
	border-radius: 8px;
	width: 95%;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	padding: .5rem;
	padding-left: 1rem;
	font: inherit;
}

.navbar-nav .dropdown-item p, .navbar-nav .dropdown-item p {
	margin-bottom: 0;
	font-weight: 500;
	font-size: 18px;
}

.navbar-nav .dropdown-item span {
	font-size: 14px;
	color: var(--bs-secondary);
	margin-left: 2rem;
	display: block;
}

.navbar-nav .dropdown-item svg {
	margin-right: .5rem;
}

.navbar-nav .dropdown-item:focus, .navbar-nav .dropdown-item:hover {
	color: var(--brand-blue);
	background-color: var(--hoverBlue);
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.navbar-collapse .btn-sm {
	font-size: 16px;
}

#dashboard{
    display: none;
}

.stepper .nav-link {
	padding: 1rem .5rem;
}


.w-fit{width: fit-content;}

.banner{
	display: block;
	background-size: cover;
	background-repeat: no-repeat repeat-x;
	background-position: center;
	position: relative;
}

.banner:before{
	content: "";
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


.banner.product-page{
	height: 16rem;
	background-image: url(../images/ink-sketches/product-banner.jpg);
}

.banner.product-analytics:before{
	height: 20rem;
	background-image: url(../images/ink-sketches/product-banner-product-analytics.jpg);
}

.banner.performance-monitoring:before{
	height: 20rem;
	background-image: url(../images/feature_performance_monitoring/bg-performancemonitoring.jpg);
}

.product-nav.sticky-top {
	top: -1.8rem;
}

.quote-bg {
	background-image: url(../images/icn-quote.svg);
	background-size: 20rem;
	background-repeat: no-repeat;
	background-position: center;
}


.product-nav .navbar-nav .nav-item, .product-nav .navbar-nav .nav-item:hover, .product-nav .navbar-nav .nav-item:hover a, .product-nav .navbar-nav .nav-item.active a {
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.product-nav .navbar-nav .nav-item:hover {
	background-color: var(--hoverBlue);
}

.product-nav .navbar-nav .nav-item:hover a {
	color: var(--black);
}

.product-nav .navbar-nav .nav-item.active {
	background-color: var(--brand-blue);
}

.product-nav .navbar-nav .nav-item.active a {
	color: var(--white);
}

.product-nav .navbar-nav .nav-item:first-child, .product-nav .navbar-nav .nav-item.active:first-child, .product-nav .navbar-nav .nav-item:first-child:hover {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.product-nav .navbar-nav .nav-item:last-child, .product-nav .navbar-nav .nav-item.active:last-child, .product-nav .navbar-nav .nav-item:last-child:hover {
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}

section {
	scroll-margin-top: 4em;
}

.fit-content {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

.fade:not(.show) {
	display: none;
}

.tab-pane {
	outline: none !important;
}

/*BUTTONS*/

.link, a {
	color: var(--brand-blue);
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
}

a p{
	font-family: 'Figtree', sans-serif;
}

.btn {
	font-family: 'Figtree', sans-serif;
	font-weight: 500;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	border-radius: .7rem;
}

.btn:focus {
	color: var(--bs-btn-active-color);
	background-color: var(--bs-btn-active-bg);
	border-color: var(--bs-btn-active-border-color);
}

.btn-active {
	background-color: var(--black);
	color: var(--white);
}

.bg-white .btn.btn-outline-primary:hover, .btn.btn-link:hover, .btn.btn-light:hover{
	background-color: var(--hoverBlue);
}

.btn.btn-link.force-hover {
	background-color: var(--hoverBlue); /* Example hover background color */
	color: var(--bs-btn-active-color);
 }
 

.btn-primary, .btn-primary.active, .btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
	background-color: var(--brand-blue);
	border-color: var(--brand-blue);
}

.btn-primary, .btn-primary.active, .btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
	background-color: var(--brand-blue);
	border-color: var(--brand-blue);
}

.btn-check:active+.btn-outline-primary:focus, .btn-check:checked+.btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.btn-check:focus+.btn-outline-primary {
	-webkit-box-shadow: 0px 1px 0px 2px rgb(57 76 253);
	box-shadow: 0px 1px 0px 2px rgb(57 76 253);
}


.btn-light{
	background-color: var(--white);
}

.btn-light:hover {
	color: var(--brand-blue);
}

.btn.btn-outline-primary:hover {
	color: var(--brand-blue);
	background-color: var(--hoverBlue);
	border-color: var(--brand-blue);
}

.btn-outline-primary{
	color: var(--brand-blue);
	border-color: var(--brand-blue);
}

.popover, .bs-popover, .box-bg, .box-bg:focus {
	border: 2px solid #000;
}

.box-bg, .box-bg:focus {
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

.btn-deploy svg {
	height: 16px;
	width: auto;
	display: inline-block;
	border-radius: 3px;
	margin-right: 2px;
	margin-top: -2px;
}


#pills-tab .nav-link{
	border-radius: 30px;
}

#pills-tab .nav-link:hover {
	background: var(--hoverBlue);
}

#pills-tab .nav-link.active:hover, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background: #fff;
    color: #000;
}


svg.deploy-ovh {
	width: 20px;
}

.state-management-platforms {
	height: 54px;
}

.cloud-benefits {
	padding-left: 1rem;
}

.cloud-benefits li {
	padding-left: .6rem;
}

.cloud-benefits li::marker {
	content: '\F633';
	font-family: 'bootstrap-icons';
	color: var(--teal);
}

.cloud-benefits .lead {
	font-size: 16px;
}




/*FOOTER*/
footer a.text-decoration-none:hover {
	text-decoration: underline !important;
}

footer {
	z-index: 99;
	background-color: #FFFFFF;
}

.footer-illustration {
	z-index: 1;
	margin-left: 1.5rem;
}

footer li a {
	font-size: 13px;
}

footer li.list-group-item strong{
	font-family: 'Bricolage Grotesque', 'Barlow', sans-serif;
}

footer .list-group-flush>.list-group-item{
	border-bottom: none;
}

/*SPACING*/
.mt-n {
	margin-top: -.10rem;
}

.mt-n1 {
	margin-top: -.25rem;
}

.mt-n2 {
	margin-top: -.50rem;
}

.mt-n3 {
	margin-top: -.75rem;
}

.mt-n4 {
	margin-top: -1rem;
}
.mt-n5 {
	margin-top: -1.45rem;
}

.mt-n6 {
	margin-top: -4rem;
}

.ml-n6 {
	margin-left: -8rem;
}


/*OTHER*/
.more-features {
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: cover;
}

.dots-bg {
	background-color: #FFFFFF;
}

.dot-pattern{
	position: relative;
}

.dot-pattern::after{
	background-image: url(../images/2024-jan/dot_grid.png);
    background-repeat: repeat;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
}

.dot-pattern-sm::after{
    background-size: 5%;
}


.dot-pattern::after{
    background-size: 1.2%;
}

.trusted-partners .img-fluid {
	max-height: 35px;
	width: auto;
}

.img-self-host {
	max-width: 120px;
}

.img-openreplay-cloud {
	width: 250px;
	margin-top: 2rem;
}

.features-outline {
	-webkit-box-shadow: 0px 0px 100px 100px #fff;
	box-shadow: 0px 0px 100px 100px #fff;
	background: #fff;
}

.features-outline div {
	cursor: pointer;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: ease-in-out all .3s;
	-o-transition: ease-in-out all .3s;
	transition: ease-in-out all .3s;
}

.features-outline div:hover {
	opacity: .8;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: ease-in-out all .2s;
	-o-transition: ease-in-out all .2s;
	transition: ease-in-out all .2s;
	text-decoration: underline;
}

.features-outline div:active {
	-webkit-transform: scale(.95);
	-ms-transform: scale(.95);
	transform: scale(.95);
	-webkit-transition: -webkit-transform .25s ease-in-out;
	transition: -webkit-transform .25s ease-in-out;
	-o-transition: transform .25s ease-in-out;
	transition: transform .25s ease-in-out;
	transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
}

.features-outline img {
	height: 74px;
}

.features-outline svg {
	fill: var(--tealWhite)!important;
}

.features-outline .text-white {
	color: var(--tealWhite)!important;
}

.features-outline p {
	margin-top: 1rem;
}

.term-privacy-header {
	margin-top: 45px;
}


.headerIcn{
	width: 25px;
	height: 25px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: thin solid #000;
	margin-right: .5rem;
}


.headerIcn svg{
	margin: auto;
	margin-right: auto !important;
}

.headerIcn1{
	background-color: #394dfe33;
}

.headerIcn2{
	background-color: #f59e0b33;
}

.headerIcn3{
	background-color: #00a96e33;
}

.headerIcn4{
	background-color: #cc000026;
}


/*Carouse*/
.landing .carousel .carousel-indicators {
	position: relative;
}

.link-primary {
	cursor: pointer;
}

.link-primary.active {
	color: var(--white) !important;
	background-color: var(--teal);
	text-decoration: none;
}


.carousel-indicators {
	position: relative;
	right: unset;
	bottom: unset;
	left: unset;
	z-index: unset;
	display: unset;
	padding: unset;
	margin-right: unset;
	margin-bottom: unset;
	margin-left: unset;
	list-style: unset;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: start;
}

.lead.carousel-indicators [data-bs-target] {
	-webkit-box-sizing: unset;
	box-sizing: unset;
	-webkit-box-flex: unset;
	-ms-flex: unset;
	flex: unset;
	width: unset;
	height: unset;
	padding: unset;
	margin-right: unset;
	margin-left: unset;
	text-indent: unset;
	cursor: pointer;
	background-color: unset;
	background-clip: unset;
	border: unset;
	border-top: unset;
	border-bottom: unset;
	opacity: unset;
	-webkit-transition: unset;
	-o-transition: unset;
	transition: unset;
	color: var(--black);
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	padding: 1rem 0;
	-webkit-transition: all 10ms ease-in-out;
	-o-transition: all 10ms ease-in-out;
	transition: all 10ms ease-in-out;
	text-decoration: none;
}

.lead.carousel-indicators [data-bs-target].active {
	text-decoration: none;
	color: #666666;
	cursor: default;
	-webkit-transition: all 10ms ease-in-out;
	-o-transition: all 10ms ease-in-out;
	transition: all 10ms ease-in-out;
}

.lead.carousel-indicators [data-bs-target].active:hover {
	background-color: #e3eced;
}

.lead.carousel-indicators [data-bs-target]:hover {
	background-color: #e3eced;
	-webkit-transition: all 10ms ease-in-out;
	-o-transition: all 10ms ease-in-out;
	transition: all 10ms ease-in-out;
}

.lead.carousel-indicators [data-bs-target]:hover img {
	-webkit-filter: none;
	        filter: none;
}

.carousel-indicator img {
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
    width: 90px;
    height: 90px;
}

.lead.carousel-indicators [data-bs-target].active img {
	-webkit-filter: none;
	        filter: none;
	opacity: 1;
}

.lead.carousel-indicators [data-bs-target].active p{
	font-weight: 600;
	color: #000;
}

.carousel-item .grid {
	margin-bottom: .75rem;
}

.lead a {
	font-weight: 500;
}

.cursor-pointer {
	cursor: pointer;
}

.cursor-default {
	cursor: default !important;
}

.spinner-border {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
    margin-left: 10px;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.text-decoration-dashed {
	-webkit-text-decoration: underline dashed #888;
	        text-decoration: underline dashed #888;
}

.hs-nav-scroller-horizontal {
	position: relative;
}

.hs-nav-scroller-horizontal .hs-nav-scroller-arrow-prev {
	left: 0;
	margin-left: -.125rem;
	background-image: -o-linear-gradient(left,#fff 50%,rgba(255,255,255,0) 100%);
	background-image: -webkit-gradient(linear,left top, right top,color-stop(50%, #fff),to(rgba(255,255,255,0)));
	background-image: linear-gradient(to right,#fff 50%,rgba(255,255,255,0) 100%);
}

.hs-nav-scroller-horizontal .hs-nav-scroller-arrow-next, .hs-nav-scroller-horizontal .hs-nav-scroller-arrow-prev {
	position: absolute;
	height: 100%;
	z-index: 1;
	font-size: 1.5rem;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
}

.hs-nav-scroller-horizontal .nav {
	overflow-x: auto;
	overflow-y: hidden;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	white-space: nowrap;
	scroll-behavior: smooth;
}

.hs-nav-scroller-horizontal .nav .nav-item {
	white-space: nowrap;
}

.hs-nav-scroller-horizontal .nav .nav-link {
	white-space: nowrap;
}

.tab-content>#product-features.active, .tab-content> #product-usecases.active{
	display: flex;
}

.stepper .nav-pills .nav-link {
	color: #000;
	-webkit-box-shadow: 3px 3px 0 rgba(0,0,0,0);
	box-shadow: 3px 3px 0 rgba(0,0,0,0);
	-webkit-transition: all ease-in-out .15s;
	-o-transition: all ease-in-out .15s;
	transition: all ease-in-out .15s;
	border: 2px solid transparent;
}

.stepper .nav-pills .nav-link.active {
	color: #000000;
	background-color: #ffffff;
	-webkit-box-shadow: 3px 3px 0 rgba(0,0,0,1);
	box-shadow: 3px 3px 0 rgba(0,0,0,1);
	border-color: #000;
	-webkit-transition: all ease-in-out .15s;
	-o-transition: all ease-in-out .15s;
	transition: all ease-in-out .15s;
}

.stepper .nav-item {
	margin: .45rem;
}

.more-features .card {
	border-color: transparent;
}

.ci-sessionreplay img{
    width: 82px;
}

.integrations-feature-icons {
	text-align: center;
	margin: auto;
	padding: 40px;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	position: relative;
	background: #fff;
}

.integrations-feature-icons svg {
	width: 190%;
	left: -36%;
	top: -30%;
	position: relative;
}

.feature-icon i {
	font-size: 14px;
}

.announcement {
	font-size: 13px;
	letter-spacing: .02rem;
	background: rgb(255,241,218);
	background: -o-linear-gradient(356deg, rgba(255,241,218,1) 0%, rgba(226,228,249,1) 54%, rgba(230,239,222,1) 100%);
	background: linear-gradient(94deg, rgba(255,241,218,1) 0%, rgba(226,228,249,1) 54%, rgba(230,239,222,1) 100%);
}

.announcement:hover{
	background:rgba(226,228,249,1) ;
}

.announcement a:hover{
	text-decoration: underline !important;
}

.letter-space {
	letter-spacing: 3px;
}

.podcast-platforms {
	display: inline-block;
	vertical-align: middle;
}

.icn-link {
	fill: #fff;
	margin: 0 4px;
	margin-top: -2px;
}

.icn-link:hover {
	opacity: .6;
}

.icn-spotify {
	margin-left: 4px;
}

.icn-link.icn-apple {
	position: relative;
	top: -1px;
}

.icn-link.icn-apple {
	position: relative;
	top: 2x;
}

.icn-list img {
	height: 5rem;
}

.text-link:hover {
	text-decoration: underline !important;
}

/*-------------*/
.stack-cards {
	--stack-cards-gap: var(--space-sm);
	--stack-cards-item-ratio: 1/1.5;
}

.stack-cards__item {
	position: relative;
	position: sticky;
	top: var(--space-md);
	height: 0;
	padding-bottom: calc(100%/(var(--stack-cards-item-ratio)));
	-webkit-transform-origin: center top;
	-ms-transform-origin: center top;
	transform-origin: center top;
}

.stack-cards__item > * {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

 /*Rolling in the deep*/

 .vertical-top{
	vertical-align: top;
 }

 .rolling-heading {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.rolling-heading .words {
	overflow: hidden;
	height: 33.59px;
}

.rolling-heading .words span {
	display: block;
	height: 100%;
	padding-left: 5px;
	text-align: left;
	-webkit-animation: spin_words 6s ease-out infinite;
	animation: spin_words 6s ease-out infinite;
}


.ci-sessionreplay {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}

.ci-devlopertools {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}

.ci-performancemonitoring {
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
}

.ci-productanalytics {
	-webkit-box-ordinal-group: 5;
	    -ms-flex-order: 4;
	        order: 4;
}

.ci-customersupport {
	-webkit-box-ordinal-group: 6;
	    -ms-flex-order: 5;
	        order: 5;
}

.lead.carousel-indicators [data-bs-target].active{
	background-color: #e2ebec;
}


/* FAQs */

.accordion-button{
font-size: 1.15rem;
}

.accordion-button:not(.collapsed){
	background-color: var(--hoverBlue);
	border-bottom: none;
	box-shadow:none;
}

.accordion-body{
	font-family: 'Figtree', Roboto, system-ui, -apple-system, sans-serif;
	font-size: 1rem;
	color: var(--bs-secondary)

}


table .lucide-check{
	fill: none;
	stroke: var(--brand-blue);
	width: 1.15rem;
}

table .lucide-x{
	fill: none;
	stroke: #cc0000;

}

table .feature-detail .lucide{
	opacity: .8;
}

table .feature-detail td, table .feature-detail td span.badge{
	font-size: 13px !important;
}

.feature-set td{
	padding: 15px 10px;
	transition: all ease-out .5s;
	background-color: var(--white);
}

.feature-set:hover td, .feature-set-expanded td{
	background-color: var(--hoverBlue);
	transition: all ease-out .2s;
}

.feature-set:hover td:first-child, .feature-set-expanded td:first-child{
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.feature-set:hover td:last-child{
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.feature-set-expanded td:first-child{
	border-top-left-radius: 4px;
	border-bottom-left-radius: 0;
}

.feature-set-expanded td:last-child{
	border-top-right-radius: 4px;
	border-bottom-right-radius: 0;
}

table .feature-detail {
	border-bottom: thin solid var(--bs-table-border-color);
}

.no-rounded-top {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.no-rounded-bottom {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.story-deployment-options{
	background-image: url(../images/2024-may/home/installation-options-bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;

}


.aiCopyRight:before{
	content: 'Generated by AI. Designed by OpenReplay.';
    position: absolute;
    bottom: 100px;
    left: -80px;
    color: rgba(255, 255, 255, 1);
    z-index: 9999;
    font-size: 10px;
	transform: rotate(270deg);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25);

}

.w-sm-100 {
	width: 100%;
  }

.w-sm-75 {
	width: 75%;
}

.w-sm-50 {
	width: 50%;
}

.w-sm-25 {
	width: 25%;
}





@media (min-width: 1000px) {

	.navbar-nav .dropdown-menu {
		width: 220px;
		top: 2rem;
		margin: 1rem;
		padding-right: 0.3rem;
		margin-left: 0;
		border: none;
		background-color: #fff;
	}

	.navbar-nav .dropdown-menu.productMenu{
		width: fit-content;
	}

	.navbar-nav .dropdown-menu li{
		margin-bottom: .25rem;
	}

	.banner{
		background-size: contain;
	}

	.deployment-btns {
		max-width: 85%;
	}

	.deploy.deployment-btns {
		max-width: 100%;
	}


	.star-github {
		margin-right: auto;
		position: relative;
		top: 3px;
	}

	.nav-item {
		border-bottom: none;
		padding: 0;
	}

	dt {
		font-weight: 500;
	}

	dd {
		margin-bottom: 1.2rem;
	}

	#os-content ul, #cloud-content ul {
		padding: 0 4rem;
	}

	ul li.d-flex span {
		font-weight: 500;
		;
	}

	footer .list-group.list-group-flush {
		padding-top: 2rem;
	}

	.gap-lg-1 {
		gap: .25rem!important;
	}

	.navbar-brand svg {
		margin-top: -10px;
	}


	.stack-cards {
		--stack-cards-item-ratio: 2.8/1;
	}

	.dots-bg {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 90 90'%3E%3Ccircle fill='%23DDE7FA' cx='45' cy='45' r='5'/%3E%3Cg fill='%23E7FEFE' fill-opacity='1'%3E%3Ccircle cx='0' cy='90' r='11'/%3E%3Ccircle cx='90' cy='90' r='11'/%3E%3Ccircle cx='90' cy='0' r='11'/%3E%3Ccircle cx='0' cy='0' r='11'/%3E%3C/g%3E%3C/svg%3E");
		background-size: auto;
	}

	span.hero-callout {
		background-position-y: 68px;
	}

	.ci-sessionreplay {
		-webkit-box-ordinal-group: 4;
		    -ms-flex-order: 3;
		        order: 3;
	}

	.ci-devlopertools {
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}

	.ci-performancemonitoring {
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.ci-productanalytics {
		-webkit-box-ordinal-group: 5;
		    -ms-flex-order: 4;
		        order: 4;
	}

	.ci-customersupport {
		-webkit-box-ordinal-group: 6;
		    -ms-flex-order: 5;
		        order: 5;
	}

	.lead.carousel-indicators [data-bs-target].active, .lead.carousel-indicators [data-bs-target].active:hover {
		background-color: #e2ebec;
	}

	.carousel-indicator {
		padding: .1rem;
	}

	.bd-layout {
		display: -ms-grid;
		display: grid;
		    grid-template-areas: "sidebar main";
		-ms-grid-columns: 1.5fr 1.5rem 4.5fr;
		grid-template-columns: 1.5fr 4.5fr;
		gap: 1.5rem;
	}

	.bd-sidebar{
		top: 2rem;
		display: block !important;
		height: calc(100vh - 6em);
		padding-left: 0.25rem;
		margin-left: -0.25rem;
		overflow-y: auto;
	}

	.bd-sidebar {
		-ms-grid-row:1;
		-ms-grid-column:1;
	}

	.bd-main {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
	}

	

}

@media (max-width: 992px) {
	h1.display-4 {
		line-height: 52px;
	}

	.nav-item {
		margin-left: 0;
		padding: 0 0 .5rem 0;
		border-bottom: thin solid rgba(0,0,0,.15);
	}

	.nav-item:last-child {
		border-bottom: none;
	}

	.product-nav .nav-item {
		padding-top: 0;
		padding-bottom: 0;
	}

	.or-cloud-plan div {
		padding: 0 12px;
	}

	.hero-secondary-action {
		margin-top: 1rem;
	}

	.feature-cover {
		background: none;
	}

	.nav-item {
		border-bottom: transparent;
	}

	span.hero-callout {
		background-position-y: 48px;
		background-size: 200px;
		background-position-x: center;
		background-repeat: no-repeat;
	}

    .nav-item{
        border-bottom: thin solid var(--bs-border-color);
    }

}


@media (max-width: 576px) {

	.display-3.fw-bold {
		font-size: calc(1.3rem + 3.3vw);
	}

	h1.display-4 {
		line-height: 42px;
	}

	.features-outline .text-white {
		font-size: 14px;
	}

	.rolling-heading h2 {
		font-size: 22px;
		height: 30px;
	}

	.rolling-heading {
		height: 5rem;
		overflow: hidden;
	}

	.rolling-heading .words span{
		text-align: center;
	}

	.os-community-cta {
		min-height: 240px;
	}

	h2 {
		font-size: 2rem;
	}

	span.hero-callout {
		background-position-y: 46px;
	}

	.feature-detail td{
		font-size: 13px;
		color: var(--bs-secondary);
	}
	

	span.hero-callout {
		background-position-y: 38px;
		background-size: 130px;
	}
}

@media (min-width: 576px) {
	.w-sm-100 {
	  width: 100%;
	}
  }

@media (min-width: 700px) and (max-width: 992px) {
	.os-community-cta {
		min-height: 280px;
	}

	span.hero-callout {
		background-position-y: 56px;
	}

	.carousel-indicator {
		padding: .2rem;
	}
}


@media (min-width: 768px) {
	.w-md-100 {
		width: 100%;
	  }
	  .w-md-75 {
		  width: 75%;
	  }
	  .w-md-50 {
		  width: 50%;
		}
	  .w-md-25 {
	  width: 25%;
	  }
  }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.w-lg-100 {
	  width: 100%;
	}
	.w-lg-75 {
		width: 75%;
	}
	.w-lg-50 {
		width: 50%;
	  }
	.w-lg-25 {
	width: 25%;
	}
  }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.w-xl-100 {
		width: 100%;
	  }
	.w-xl-75 {
	  width: 75%;
	}
	.w-xl-50 {
		width: 50%;
	  }
	.w-xl-25 {
	width: 25%;
	}
  }