/* ******************************************************************************
*********************************************************************************
Use this file to override any of the CSS styles preset in the themed
stylesheets or you can add your own custom styles.
*********************************************************************************
****************************************************************************** */

/* Test */



:root {
  --white-dark: #E5E5E5;
  --white: #FFFFFF;

  --off-white: #F2ECF4;

  --purple-dark: #472766;
  --purple: #6A3A99;

  --purple-light: #F2ECF4;

  --blue: #2B384F;

  --focus-color: #CA94FF;

  --analytics-100: #2F7161;
  --analytics-20: #2F716133;

  --surveys-100: #266687;
  --surveys-20: #26668733;

  --heatmaps-100: #77314B;
  --heatmaps-20: #77314B33;

  --shadow-XL: 0px 20px 30px 0px rgba(106, 58, 153, 0.15);

}




.dnd-section:not([class*="max-width-section-centering"]) > .row-fluid {
  max-width:1200px;
}
.dnd-section > .row-fluid {
  max-width: 801px;
  width:100%;
}
@media (max-width:1220px){
  .dnd-section > .row-fluid {
    width:90%;
  }
}
.dnd-section {
  padding-bottom: 4%;
  padding-top: 4%;
}
@media (min-width:1628px){
  main .dnd-section {
    padding-bottom: 65.0px;
    padding-top: 65.0px;
  }
}
@media (max-width:980px){
  main .dnd-section {
    padding-bottom: 50.0px;
    padding-top: 50.0px;
  }
}
.page-center {
  max-width: 801px;
}






body,p {
  font-family: 'Bariol';
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  color: var(--blue);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
p{
  margin-block-start: 4px;
  margin-block-end: 6px;
}
p.large{
  font-size: 21px;
}
p.xl{
  font-size: 28px;
}
p.small{
  font-size: 14px;
}
h1,h2,h3,h4,h5,h6{
  color: var(--purple);
  line-height: 130%;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: 400;
}
h3,h4,h5,h6{
  font-family: "Bariol light";
  font-weight: 600;
  line-height: 110%;
}
h1{
  font-family: "Bariol light";
  font-size: 65px;
  letter-spacing: -1.625px;
  margin-block-start: 24px;
  margin-block-end: 20px;
}
h2{
  font-family: 'Prata';
  font-size: 36px;
  letter-spacing: -1.375px;
  margin-block-start: 20px;
  margin-block-end: 16px;
}
h3{
  font-size:30px;
  letter-spacing: -0.96px;
  margin-block-start: 18px;
  margin-block-end: 14px;
}
h4{
  font-size: 26px;
  letter-spacing: -0.8px;
  margin-block-start: 16px;
  margin-block-end: 12px;
}
h5{
  font-size: 20px;
  line-height: 130%;
  letter-spacing: -0.28px;
  margin-block-start: 14px;
  margin-block-end: 10px;
}
h6{
    font-style: italic;
  font-size: 19px;
  margin-block-start: 8px;
  margin-block-end: 4px;
}

a strong,
p strong,
.bold{
  font-family: 'Bariol bold';
  font-weight:400;
}
em,
p em,
i,
p i,
cite{
  font-family: 'Bariol regular italic';
  font-weight:400;
}

a {
  color: var(--purple);
  cursor: pointer;
  text-decoration: underline;
}

ul{
  list-style-type: initial;
  line-height: 26px;
  margin: 0;
  padding: 0 0 1em 1em
}

ol{
  line-height: 26px;
  margin: 0;
  padding: 0 0 1em 1em
}

hr{
  border: 1px solid var(--blue);
  margin-block-start: 4px;
  margin-block-end: 6px;
}





ul.checkmark {
  list-style-type: none;
  padding-inline-start:30px !important;
}

ul.checkmark li:before {
  content: '\2714\fe0e';
  margin-right: 8px;
  margin-left: -27px;
}




form .button-wrapper-form:hover:after{
  display: none;
}

form .legal-consent-container{
  margin-bottom: 20px;
}
form .legal-consent-container p{
  font-size: 16px !important;
}

form .legal-consent-container label.hs-form-booleancheckbox-display{
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  margin-top: 10px;
  font-size: 16px;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  display: block;
  width: 100%  }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
           }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0;}
label,
legend {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }
.hs-input:where([type="checkbox"], [type="radio"]),
input:where([type="checkbox"], [type="radio"]){
  cursor: pointer;
  appearance: none;
  display: inline-flex;
  width: 22px;
  height: 22px;
  margin: calc(0.75em - 11px) 0.25rem 0 0;
  vertical-align: top;
  border: 2px solid #ddd;
  border-radius:4px;
  background:#fff no-repeat center center;
}
.hs-input:where([type="checkbox"], [type="radio"]):where(:active:not(:disabled), :focus),
input:where([type="checkbox"], [type="radio"]):where(:active:not(:disabled), :focus){
  border-color : var(--focus-color);
  outline      : none;
}
.hs-input[type="radio"],
input[type="radio"]{
  border-radius : 50%;
}
.hs-input:where([type="checkbox"], [type="radio"]):disabled,
input:where([type="checkbox"], [type="radio"]):disabled{
  background : var(--white-dark);
}
.hs-input[type="checkbox"]:checked,
input[type="checkbox"]:checked{
  background: var(--off-white);
  background-image : url(//8819850.fs1.hubspotusercontent-na1.net/hubfs/8819850/raw_assets/public/Extellio-2024%20academy/images/check.svg);
  background-size: contain;
  background-position: center;
}
.hs-input[type="radio"]:checked,
input[type="radio"]:checked{
  background: var(--off-white);
  background-image : url(//8819850.fs1.hubspotusercontent-na1.net/hubfs/8819850/raw_assets/public/Extellio-2024%20academy/images/radio.svg);
  background-size: contain;
  background-position: center;
}






input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button,
.button--primary,
.button--secondary,
.hs-button,
.hs-search-field__bar form button{
  /* for all btns */
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: "Bariol";
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border .3s ease;
  /* size dependant variables  */
  padding: 14px 20px;
  font-size: 19px;
  /* type dependant variables  */
  color: var(--white);
  background: var(--purple);
  border: 1px solid var(--purple);
  margin: 5px 0;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button.small,
.button.samll,
a.button.small,
.hs-search-field__bar form button{
   /* size dependant variables  */
   padding: 10px 15px;
   border-radius: 10px;
   font-size: 17px;
  background:#432461;
}
button.secondary,
.button--secondary,
.button.secondary{
    /* type dependant variables  */
  color: var(--purple);
  background: var(--white);
  border: 2px solid var(--purple);
}
button.secondaryColor,
.button.secondaryColor{
    /* type dependant variables  */
  color: var(--purple);
  background: var(--purple-light);
  border: 1px solid var(--purple-light);
}
button.tetriary,
.button.tetriary{
    /* type dependant variables  */
  color: var(--purple);
  background: transparent;
  border: 1px solid transparent;
}

button svg,
.button svg{
  color: color: var(--white);
}
button svg path,
.button svg path{
  stroke: color: var(--white);
}
button.secondary svg,
.button.secondary svg,
button.secondaryColor svg,
.button.secondaryColor svg,
button.tetriary svg,
.button.tetriary svg{
  color: var(--purple);
}

button.secondary svg path,
.button.secondary svg path,
button.secondaryColor svg path,
.button.secondaryColor svg path,
button.tetriary svg path,
.button.tetriary svg path{
  stroke: var(--purple);
}

.hs-button:after,
a.hs-button:after {
  content: " " !important;
}

.hs-search-field__bar form button{
  border-radius: 3px;
    margin: 0;
    padding: 0;
    border-color: white;
}



/********* HOVER **********/
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover,
.button--primary:hover,
.hs-button:hover{
  /* type dependant variables  */
  background: var(--purple-dark);
}
button.secondary:hover,
.button--secondary:hover,
.button.secondary:hover{
  /* type dependant variables  */
  background: var(--white-dark);
}
button.secondaryColor:hover,
.button.secondaryColor:hover{
  /* type dependant variables  */
  background: var(--white-dark);
}
button.tetriary:hover,
.button.tetriary:hover{
  /* type dependant variables  */
  background: var(--white-dark);
}





/********* PRESSED **********/
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active,
.button--primary:active,
.hs-button:active{
  /* type dependant variables  */
  background: var(--blue);
}
button.secondary:active,
.button--secondary:active,
.button.secondary:active{
  /* type dependant variables  */
  background: var(--blue);
  color: var(--white);
}
button.secondaryColor:active,
.button.secondaryColor:active{
  /* type dependant variables  */
  background: var(--blue);
  color: var(--white);
}
button.tetriary:active,
.button.tetriary:active{
  /* type dependant variables  */
  background: var(--blue);
  color: var(--white);
}




button.secondary:active svg,
.button.secondary:active svg,
button.secondaryColor:active svg,
.button.secondaryColor:active svg,
button.tetriary:active svg,
.button.tetriary:active svg {
  color: var(--white);
}

button.secondary:active svg path,
.button.secondary:active svg path,
button.secondaryColor:active svg path,
.button.secondaryColor:active svg path,
button.tetriary:active svg path,
.button.tetriary:active svg path {
  stroke: var(--white);
}



/* margin and paddings */

.m-1{
  margin :4px;
}
.m-2{
  margin :8px;
}
.m-3{
  margin :16px;
}
.m-4{
  margin :24px;
}
.ms-1{
  margin-left :4px;
}
.ms-2{
  margin-left :8px;
}
.ms-3{
  margin-left :16px;
}
.ms-4{
  margin-left :24px;
}

.me-1{
  margin-right :4px;
}
.me-2{
  margin-right :8px;
}
.me-3{
  margin-right :16px;
}
.me-4{
  margin-right :24px;
}
.mt-1{
  margin-top :4px;
}
.mt-2{
  margin-top :8px;
}
.mt-3{
  margin-top :16px;
}
.mt-4{
  margin-top :24px;
}

.mb-1{
  margin-bottom :4px;
}
.mb-2{
  margin-bottom :8px;
}
.mb-3{
  margin-bottom :16px;
}
.mb-4{
  margin-bottom :24px;
}
.dnd-section{
  padding: 50px 20px;
}

@media only screen and (max-width: 767px) {
  .dnd-section{
    padding: 100px 20px;
  }
  h1{
    font-size: 46px;
  }
  h2{
    font-size: 38px;
  }
  h3{
    font-size:24px;
    font-family: 'Bariol';
  }
  h4{
    font-size: 22px;
    font-family: 'Bariol';
  }
  h5{
    font-size: 20px;
  }
  h6{
    font-size: 19px;
  }
}

.customer-grid .cg-item {
  mix-blend-mode: multiply;
}

.widget-type-rich_text p{
  padding-bottom: 10px;

}