@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* * {
  scroll-behavior: smooth;
} */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
html {
  overflow-x: hidden;
}
body, #root, .content {
  font-family: 'Roboto', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 16px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: auto;
  min-height:100vh;
  line-height: 1.6rem;

}

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

a {
  text-decoration: none;
  color: inherit;
}

h1, h2 {
  font-weight: 400;
  line-height: 1.8em;
}

h1, h2 {
  text-align: center;
}

h3, h4, h5, h6 {
  margin-block-start: 0;
  margin-block-end: 0;
}

h4 {
  font-size: 20px;
  font-weight: 500;
}

p.rte-block-paragraph, h4.ce-header {
  display: block; /* ignored?? */
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

button {
  font-size: inherit;
  font-family: inherit;
  font: inherit;
}
button:focus {
  outline:0;
}

img {
  max-width: 100%;
}

ul {
	padding-left: 20px;
  list-style: none;
}
ul li {
	padding: 0px;
  margin-bottom: 0.8rem;
}
ul li::before {
  content: "●";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #1864ab; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.2em; /* Also needed for space (tweak if needed) */
  margin-left: -1.2em; /* Also needed for space (tweak if needed) */
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.45em center;
  padding: 4px;
  padding-right: 1.2em;
  background-color: #222222;
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:white;'/> \
    </svg>");

  border: 1px solid #666666;
  color: inherit;
  font-size: 14px;
}

nav {
  width: 100%;
  background: #108db8;
}

nav a {
  color: white;
  padding: 1rem;
  display: inline-block;
}
blockquote {
	margin-block-start: 0;
	margin-block-end: 0;
	font-style: italic;
}

table {
  font-family: Roboto, sans-serif;
  width: 100%;
  border-collapse: collapse;
  caption-side: top;
  color: rgb(0, 0, 0);
  line-height: 1.55;
}

tbody > tr > td {
  padding: 0.625rem;
  border-top: 0.0625rem solid rgb(222, 226, 230);
  font-size: 1rem;
}

thead > tr > th, tfoot > tr > th {
  text-align: left;
  font-weight: bold;
  color: rgb(73, 80, 87);
  font-size: 1rem;
  padding: 0.625rem;
}


.col40 {
  flex: 1 1 40%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}


/* Language Switcher */
.dropdownContainer {
  position: relative;
  display: inline-block;
}
.dropdownButton {
  display: flex;
   column-gap: 8px;
   align-items: center;
 }
.dropdownItems {
  max-height: 0;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.dropdownItems a {
  display: none;
  color: black;
  padding: 8px 10px;
  text-decoration: none;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
/* Show the dropdown menu on hover */
.dropdownContainer:hover .dropdownItems {
  max-height: 200px;
}
.dropdownContainer:hover .dropdownItems a {
  display: block;
}
/* Change color of dropdown links on hover */
.dropdownItems a:hover {
  background-color: #ddd;
}




.section-inner {
  overflow-x: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
.section-inner-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.title {
  justify-content: space-around;
}
.actionButton {
  box-sizing: border-box;
  border-radius: 2px;
  border: none;
  padding: 15px;
  letter-spacing: .1rem;
  margin-bottom: 1px;
  line-height: 1em;
  background: #3777ab;
  color: white;
  font-weight: 400;
  font-size: 0.9rem;
  box-shadow:  0 1px 1px rgba(0, 0, 0, 0.06),
  2px 6.7px 5.3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}
.mantine-Button-label {
	font-weight: 400 !important;
	font-size: 0.9rem !important;
	/* padding: 15px !important; */
}
.mantine-Button-root {
  height: auto !important;
}

@media (max-width: 30em) {
  .padding {
    padding: 10px
  }
  .col30, .col30-left {
    padding: 15px;
  }
}
@media (min-width: 30em) {
  .padding {
    padding: 20px
  }
  .col30, .col30-left {
    padding: 30px;
  }
}


/* .card {
  background: #f7f7f7;
}
.card: hover {
  background: #e3e3e3;
} */

/* .gridTile {

} */
@media (max-width: 600px) {
  .gridTile {
    flex: 0 0 100%;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .gridTile {
    flex: 0 0 50%;
  }
}
@media (min-width: 900px) {
  .gridTile {
    flex: 0 0 33.33%;
  }
}
.card {
  /* border: 1px solid lightgrey; */
  margin: calc(0.7vw + 5px);
	-webkit-box-shadow: 0px 2px 8px -4px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 2px 8px -4px rgba(0,0,0,0.35);
	box-shadow: 0px 2px 8px -4px rgba(0,0,0,0.35);
	height: calc(100% - 1.4vw - 13px);
	border-bottom: 3px solid #bacad9;
	display: flex;
	flex-direction: column;
	min-height: 50px;
	box-sizing: border-box;
	justify-content: flex-start;
}
.cardTitle {
	padding: 16px 15px 8px;
	background: rgba(235, 239, 242, 0.7);
	/* margin: 6px 6px 0px; */
}
.cardTitle h3 {
	font-weight: 500;
}
.cardTeaser {
	padding: 0px 15px 10px;
	margin-top: 0px;
}
.cardTeaser p {
	margin-block-start: 10px;
}
.screenshotImage {
	padding: 10px;
	width: 75%;
	max-width: 95vw;
}



/* Consent Banner */

.consentBanner {
  position: fixed;
  bottom: 7px;
  left: 7px;
  right: 7px;
	border-radius: 7px;
  background: #2d3e4e; /* #3b5675 */
  padding: 15px;
  line-height: 2;
  overflow: auto;
	box-sizing: border-box;
	z-index: 1300;
  /* box-shadow:         0 -1px 1px rgba(255, 255, 255, 0.05), 0 -5px 7px rgba(255, 255, 255, 0.15);
  -moz-box-shadow:    0 -1px 1px rgba(255, 255, 255, 0.05), 0 -5px 7px rgba(255, 255, 255, 0.15);
  -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.05), 0 -5px 7px rgba(255, 255, 255, 0.15); */
}
.consentButton {
	background: transparent;
	color: white;
  /* color: #3b5675; */
  font-weight: 400;
  border: 1px white solid;
  border-radius: 7px;
  padding: 3px 10px 3px 10px;
  /* box-shadow:         0 0 3px rgba(255, 255, 255, 0.2);
  -moz-box-shadow:    0 0 3px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 0 0 3px rgba(255, 255, 255, 0.2); */
}
.denyButton {
  background: transparent;
  color: white;
  font-weight: 400;
  /* text-decoration: underline; */
	border: 1px white solid;
	border-radius: 7px;
  padding: 3px 10px 3px 10px;
}




/* Zoho SalesIQ */

.zsiq_theme1.zsiq_floatmain, .zsiq_theme1 .zsiq_flt_rel  {
  width: 50px !important;
  height: 50px !important;
}
.zsiq_theme1 .zsiq_flt_rel {
  border-radius: 50px !important;
}
.zsiq_theme1 .siqico-chat:before {
  line-height: 45px !important;
  font-size: 22px !important;
  /* applies this right now:
  content: '\e901';
  font-family: siq;
  font-size: 27px; */
}
.zsiq_theme1 div.zsiq_min.zsiq_cnt, .zsiq_flt_rel #titlediv {
  animation: showLater 1s linear 0s forwards;
  -webkit-animation: showLater 1s linear 0s forwards;
  -moz-animation: showLater 1s linear 0s forwards;
  -o-animation: showLater 1s linear 0s forwards;
}
@keyframes showLater { from {display: none;} to {display: flex;} }
@-webkit-keyframes showLater { from {display: none;} to {display: flex;} }
@-moz-keyframes showLater { from {display: none;} to {display: flex;} }
@-o-keyframes showLater { from {display: none;} to {display: flex;} }



/* Top Nav */

.topMenuInner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: center;
  align-content: center;
	height: 70px;
}

.topMenuInner span {
  padding: 15px;
  font-weight: 400;
}

/* Add a black background color to the top navigation */
.topnav {
  /* background-color: #333; */
  overflow: hidden;
	line-height: 1rem;
	margin: 0 auto;
  max-width: 1200px;
}
.topnavContainer {
	position: fixed;
	width: 100%;
	z-index: 1200;
}
.topnavContainer + div, .topnavContainer + main {
	padding-top: 80px;
}

.navRight {
	float: right;
}

/* Style the links inside the navigation bar */
.topnav a, .topnav .dropbtn {
  float: left;
  display: flex;
  /* color: #f2f2f2; */
	color: white;
  text-align: center;
  padding: 0 15px;
  /* text-decoration: none;
  font-size: 17px; */
	box-sizing: border-box;
	align-items: center;
	min-height: 60px;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
	padding: 0;
}

.dropdown .dropbtn > span:first-child {
	padding: 0;
}

.dropdown .dropbtn > span:not(:first-child), .dropdown .dropbtn > a, .dropdown .dropbtn > button {
	padding: 0 15px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .menuIcon, .topnav .downIcon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
	height: 100%;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
	top: 60px;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 18px;
  text-decoration: none;
  display: block;
  text-align: left;
	min-height: 40px;
	font-size: 15px;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  /* background-color: #555; */
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

@media screen and (min-width: 850px) {
	/* Show the dropdown menu when the user moves the mouse over the dropdown button */
	.dropdown:hover .dropdown-content {
	  display: block;
	}
	/* Add an active class to highlight the current page */
	.navRight .active {
	  /* background-color: #04AA6D; */
	  /* color: white; */
		border-bottom: 3px solid #63a5da;  /* #3b5675 */
		border-top: 3px solid transparent;
	}
  .navRight .dropdown-content .active {
    border-bottom: none;
    /* background: #d5dce2; */
    border-left: 3px solid #63a5da;  /* #3b5675 */
  }
}

/* When the screen is less than 850 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 850px) {
  .topnav .navRight a/*:not(:first-child)*/, .topnav .navRight .dropbtn, .topnav .navRight button {
    display: none;
  }
  .topnav .menuIcon {
    float: right;
    display: inline-flex;
		font-size: 25px;
		align-items: center;
		height: 100%;
		padding: 0;
		box-sizing: border-box;
		height: 70px;
		padding: 0 15px;
		color: white;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 850px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .menuIcon {
    position: absolute;
    right: 0;
    top: 0;
		height: 70px;
		padding: 0 15px;
  }
	.topnav.responsive .downIcon { display: block; }
  .topnav.responsive .navRight a, .topnav.responsive .navRight .dropbtn, .topnav.responsive .navRight button {
    float: none;
    display: flex; /* block */
    text-align: left;
		min-height: 50px;
  }
	.topnav.responsive .navRight {
		width: 100%;
	}
  .topnav.responsive .dropdown {
		float: none;
	}
	/* Show the dropdown menu upon click */
	.dropdown .dropdown-content.open {
	  display: block;
	}
  .topnav.responsive .dropdown-content {
		position: relative;
		top: 0;
	}
  .topnav.responsive .dropdown .dropbtn {
		justify-content: space-between;
		display: flex;
		width: 100%;
    text-align: left;
		padding: 6px 0;
  }
	.topnav.responsive .navRight > a, .topnav.responsive .navRight > span > a {
		padding: 6px 15px;
	}
	/* Add an active class to highlight the current page */
	.navRight .active {
		/* background-color: #04AA6D; */
		/* color: white; */
		border-left: 3px solid #63a5da;  /* #3b5675 */
	}
}









/* Case Studies */

.article-section-inner {
  max-width: 1000px;
  padding-top: 30px;
  padding: 15px;
  justify-content: flex-start;
}
/*
.article-section-inner p {
  line-height: 1.8;
}
*/
.article-section-inner a {
  color: #108db8;
  /* text-decoration: ; */
}
p.rte-block-paragraph {
  margin-block-start: 10px;
  margin-block-end: 10px;
}
img.rte-block-image {
  filter: drop-shadow(1px 2px 10px rgba(0, 0, 0, .15));
  /* box-shadow: 1px 2px 10px rgba(0, 0, 0, .15); */
  margin-block-start: 16px;
  margin-block-end: 16px;
}
/*
.rte-block-delimiter {
  width: 80%;
  left: 50%;
  border-bottom: 1px lightgrey solid;
}
*/


.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  /* grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); */
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}
@media (max-width: 49.9375em) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 1rem 0.75rem;
  }
}
.featureBox {
  /* flex: 1 1 30%; */
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
  /* max-width: 22em;
  min-width: 15em; */
  margin: 15px;
  box-sizing: border-box;
}


.f-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.f-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem;
  box-sizing: border-box;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  height: 100%;
}

.f-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: scale(1.02);
}

.f-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.f-icon {
  background: #eaf3ff;
  color: rgb(24, 100, 171);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  margin-bottom: 1rem;
}

.f-title {
  font-weight: 500;
}

.f-description {
  color: rgb(134, 142, 150);
  font-size: 0.95rem;
}

.f-learn-more {
  margin-top: auto;
  font-style: italic;
  color: #3777ab;
  font-size: 0.95rem;
  text-align: center;
  color: #3777ab;
  font-size: 0.95rem;
}

.f-content {
  flex: 0 1 auto;
}



/* demo-form.css */

/* 1. Grid wrapper */
.demo-grid {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  align-items: stretch;
}

.demo-grid > * {
  padding: calc(0.75rem); 
  flex: 0 0 100%;
  max-width: 100%;
}

/* At small screens and up (sm = 48em), span=6 → 50% width */
@media (min-width: 48em) {
  .demo-grid > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* 2. “Paper” container */
.demo-paper {
  background: #fff;
  padding: 1rem;
  border-radius: 0.125rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 3. Form groups */
.demo-form .form-group {
  margin: 1.25rem;
}

.demo-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #212529;
}

.demo-form .required {
  color: #e03131;
}

/* 4. Inputs, selects, textareas */
.demo-form input,
.demo-form textarea,
.demo-form select {
  height: 2.25rem;
  -webkit-tap-highlight-color: transparent;
  line-height: calc(2.125rem);
  appearance: none;
  resize: none;
  box-sizing: border-box;
  font-size: 0.875rem;
  width: 100%;
  color: rgb(0, 0, 0);
  display: block;
  text-align: left;
  border: 0.0625rem solid rgb(206, 212, 218);
  background-color: rgb(255, 255, 255);
  transition: border-color 100ms;
  min-height: 2.25rem;
  padding-left: calc(0.75rem);
  padding-right: calc(0.75rem);
  border-radius: 0.125rem;
  /* color: #495057;
  background: #fff;
  border: 1px solid #ced4da; */
}

.demo-form input:focus,
.demo-form textarea:focus,
.demo-form select:focus {
  outline: none;
  border-color: #4dabf7;
  box-shadow: 0 0 0 2px rgba(77,171,247,0.25);
}

/* 5. Note below inputs */
.demo-form .note {
  font-size: 0.85rem;
  font-style: italic;
  color: #868e96;
  line-height: 1.55;
  margin: 1.25rem 1.25rem 0.75rem;
}

/* 6. Submit button */
.demo-form .actionButton,
.demo-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: rgb(24, 100, 171);
  color: #fff;
  border: none;
  border-radius: 0.125rem;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.1s ease;
  margin: 0 0 20px 20px;
}

.demo-form .actionButton:hover,
.demo-form button[type="submit"]:hover {
  background: #1971c2;
  transform: translateY(-1px);
}

.demo-form .actionButton:disabled,
.demo-form button[type="submit"]:disabled {
  background: #adb5bd;
  cursor: not-allowed;
  transform: none;
}

/* 1. Lighter placeholder text */
.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: #adb5bd;    /* a light gray, tweak to taste */
  opacity: 1;        /* override default opacity */
}

/* vendor prefixes if you need older browser support */
.demo-form input::-webkit-input-placeholder { color: #adb5bd; opacity: 1; }
.demo-form input:-ms-input-placeholder          { color: #adb5bd; opacity: 1; }
.demo-form input::-ms-input-placeholder         { color: #adb5bd; opacity: 1; }

/* 2. Remove the native blue glow on focus */
.demo-form input:focus,
.demo-form textarea:focus {
  outline: none;     /* removes the default outline */
  box-shadow: none;  /* kills the browser’s glow effect */
  /* if you still want a custom focus border, re-add it here: */
  border-color: #275376;
}

/* Success message styling */
.demo-form .success-message {
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 500;
  color: #0f77a0;
  margin: 0 1.25rem;
}