/* Shared article presentation retained during the Markdown experiment. */

  .medium-zoom-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, .8) !important;
  }

  .medium-zoom-image--opened {
    z-index: 10000 !important;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-radius: .75rem;
  }
  /* Tokyo Night theme for Highlight JS */
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: Tokyo-night-Dark
  origin: https://github.com/enkia/tokyo-night-vscode-theme
  Description: Original highlight.js style
  Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
  License: see project LICENSE
  Touched: 2022
*/.hljs-comment,.hljs-meta{color:#565f89}.hljs-deletion,.hljs-doctag,.hljs-regexp,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-tag,.hljs-template-tag,.hljs-variable.language_{color:#f7768e}.hljs-link,.hljs-literal,.hljs-number,.hljs-params,.hljs-template-variable,.hljs-type,.hljs-variable{color:#ff9e64}.hljs-attribute,.hljs-built_in{color:#e0af68}.hljs-keyword,.hljs-property,.hljs-subst,.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#7dcfff}.hljs-selector-tag{color:#73daca}.hljs-addition,.hljs-bullet,.hljs-quote,.hljs-string,.hljs-symbol{color:#9ece6a}.hljs-code,.hljs-formula,.hljs-section{color:#7aa2f7}.hljs-attr,.hljs-char.escape_,.hljs-keyword,.hljs-name,.hljs-operator{color:#bb9af7}.hljs-punctuation{color:#c0caf5}.hljs{background:#1a1b26;color:#9aa5ce}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
  pre {white-space: pre-wrap; tab-size: 2;}
  .hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}


/* Make text look crisper and more legible in all browsers */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
/* Focus state style for keyboard navigation for the focusable elements */

*[tabindex]:focus-visible, input[type="file"]:focus-visible {
	outline: 0.125rem solid #4d65ff;
	outline-offset: 0.125rem;
}

.clickable_link:focus-visible, .clickable_link[data-wf-focus-visible] {
    outline-offset: -3px !important;
}
/* Set color style to inherit */

.inherit-color * {
	color: inherit;
}
/* Navigation Breakpoints */

@media (min-width: 992px) and (max-width: 1279px) {
	.nav_menu_dropdown_box.is-resources.w--open {
		left: -44vw;
		width: 800px;
	}
	.simple_nav_grid.is-resources {
		grid-template-columns: minmax(40%, 1fr) minmax(60%, 1fr);
	}
	.nav_menu-col-resources {
		background: none;
	}
}
/* Get rid of top margin on first element in any rich text element */

.w-richtext> :not(div):first-child, .w-richtext>div:first-child> :first-child {
	margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */

.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}
/* Make sure containers never lose their center alignment */

.container-medium, .container-small, .container-large {
	margin-right: auto !important;
	margin-left: auto !important;
}
/*
Make the following elements inherit typography styles from the parent and not have hardcoded values.
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/

/* Apply "..." after 3 lines of text */

.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */

.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */

.text-style-1lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
/* These classes are never overwritten */

.hide {
	display: none !important;
}
@media screen and (max-width: 991px) {
	.hide, .hide-tablet {
		display: none !important;
	}
}
@media screen and (max-width: 767px) {
	.hide-mobile-landscape {
		display: none !important;
	}
}
@media screen and (max-width: 479px) {
	.hide-mobile {
		display: none !important;
	}
}
.margin-0 {
	margin: 0rem !important;
}
.padding-0 {
	padding: 0rem !important;
}
.spacing-clean {
	padding: 0rem !important;
	margin: 0rem !important;
}
.margin-top {
	margin-right: 0rem !important;
	margin-bottom: 0rem !important;
	margin-left: 0rem !important;
}
.padding-top {
	padding-right: 0rem !important;
	padding-bottom: 0rem !important;
	padding-left: 0rem !important;
}
.margin-right {
	margin-top: 0rem !important;
	margin-bottom: 0rem !important;
	margin-left: 0rem !important;
}
.padding-right {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
	padding-left: 0rem !important;
}
.margin-bottom {
	margin-top: 0rem !important;
	margin-right: 0rem !important;
	margin-left: 0rem !important;
}
.padding-bottom {
	padding-top: 0rem !important;
	padding-right: 0rem !important;
	padding-left: 0rem !important;
}
.margin-left {
	margin-top: 0rem !important;
	margin-right: 0rem !important;
	margin-bottom: 0rem !important;
}
.padding-left {
	padding-top: 0rem !important;
	padding-right: 0rem !important;
	padding-bottom: 0rem !important;
}
.margin-horizontal {
	margin-top: 0rem !important;
	margin-bottom: 0rem !important;
}
.padding-horizontal {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
}
.margin-vertical {
	margin-right: 0rem !important;
	margin-left: 0rem !important;
}
.padding-vertical {
	padding-right: 0rem !important;
	padding-left: 0rem !important;
}

/* Dodajemo dodatni element za statičnu ivicu */

.button.is-secondary::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: 3rem;
	/*border: 1px solid rgba(81, 56, 238, 0.9);*/
	z-index: -1;
}
/* Element za rotirajuću ljubičastu liniju */

.button.is-secondary::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	border-radius: 3rem;
	background: conic-gradient( from 0deg, transparent 0%, transparent 20%, rgba(81, 56, 238, 0.05) 21%, /* Jedva primetna ljubičasta - početak */
	rgba(81, 56, 238, 0.1) 22%, /* Vrlo blaga ljubičasta */
	rgba(81, 56, 238, 0.2) 23%, /* Blaga ljubičasta */
	rgba(81, 56, 238, 0.3) 24%, /* Postepeno pojačavanje */
	rgba(81, 56, 238, 0.4) 25%, rgba(81, 56, 238, 0.6) 26%, rgba(81, 56, 238, 0.7) 27%, rgba(81, 56, 238, 0.8) 28%, rgba(81, 56, 238, 0.85) 29%, /* Skoro puna ljubičasta */
	rgba(81, 56, 238, 0.85) 31%, /* Skoro puna ljubičasta se nastavlja */
	rgba(81, 56, 238, 0.8) 32%, /* Početak postepenog smanjivanja */
	rgba(81, 56, 238, 0.7) 33%, rgba(81, 56, 238, 0.6) 34%, rgba(81, 56, 238, 0.4) 35%, rgba(81, 56, 238, 0.3) 36%, /* Blaga ljubičasta */
	rgba(81, 56, 238, 0.2) 37%, /* Vrlo blaga ljubičasta */
	rgba(81, 56, 238, 0.1) 38%, /* Jedva primetna ljubičasta */
	rgba(81, 56, 238, 0.05) 39%, /* Jedva primetna ljubičasta - kraj */
	transparent 40%, transparent 100%);
	z-index: -2;
	opacity: 0;
	transition: opacity 0.3s;
}
.button.is-secondary:hover::after {
	opacity: 1;
	animation: rotate 1s linear infinite;
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.z-index-1 {
	position: relative;
	z-index: 2;
}
/*THIS STYLES ARE FOR THE SCROLL BAR THAT APPREAR ON THE TOC (BLOG TEMPLATE AND OTHER TEMPLATES)*/

.fs-toc_sidebar::-webkit-scrollbar,
.topics_sidebar::-webkit-scrollbar {
	width: 6px;
}
/*track*/

.fs-toc_sidebar::-webkit-scrollbar-track,
.topics_sidebar::-webkit-scrollbar-track {
	background: transparent;
	border-style: none;
	border-radius: 8px;
}
/*thumb*/

.fs-toc_sidebar::-webkit-scrollbar-thumb,
.topics_sidebar::-webkit-scrollbar-thumb {
	background: rgb(200, 200, 200);
	border-radius: 8px;
}
.swiper-slide.is-gallery .gallery-img__wrapper {
	opacity: 0.25;
	transform: scale(0.98);
}
.swiper-slide.is-gallery .gallery-info__wrapper {
	opacity: 0;
	transform: translateY(50%);
}
.swiper-slide.is-gallery.swiper-slide-active .gallery-img__wrapper {
	opacity: 1;
	transform: scale(1);
}
.swiper-slide.is-gallery.swiper-slide-active .gallery-info__wrapper {
	opacity: 1;
	transform: translateY(0%);
}
.ripple {
	animation: ripple-animation 2.5s ease-out infinite;
	transform-origin: center;
}
@keyframes ripple-animation {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
.featured_blog_link:hover .featured_blog_button {
	color: #4F43DD;
}
/* Pulsing animation */

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
.faq_trigger:hover .faq-icon {
	color: var(--base-color-brand--primary);
}

/*Main CTA*/
.main_cta {
		background-image: url('/blog-assets/283230de36cdf20b6abf.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

/*Osano styles*/

  .osano-cm-dialog, .osano-cm-dialog * {
	font-family: 'Geist', Arial, sans-serif !important;
}
.osano-cm-dialog {
	font-size: 14px !important;
}
.osano-cm-disclosure__toggle, .osano-cm-info-dialog__info.osano-cm-storage-policy.osano-cm-content__link.osano-cm-link {
	color: #000 !important;
}
.osano-cm-info {
	font-family: 'Geist', Arial, sans-serif !important;
}
.osano-cm-info #osano-cm-drawer-toggle--category_ESSENTIAL--description {
	font-size: 14px !important;
}
.osano-cm-drawer-toggle .osano-cm-label {
	font-size: 1em !important;
	font-weight: 500 !important;
}
.osano-cm-info-views p {
	font-size: 14px !important;
}
.osano-cm-button {
	border-radius: 48px !important;
	outline: 1.5px solid #d0d5dd;
	outline-offset: -2px;
	color: #000 !important;
	background-color: #fff !important;
	border: none !important;
	font-weight: 600 !important;
}
.osano-cm-save:hover, .osano-cm-save:focus {
	background-color: #F7F7FF !important;
	outline: 1.5px solid #d0d5dd;
	outline-offset: -2px;
}

/* Respect user's reduced motion preference
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .w-condition-invisible,
  [data-w-id] {
    opacity: 1 !important;
    transform: none !important;
  }

  .w-animation--active,
  .w--animate,
  .w--triggered {
    animation: none !important;
    transition: none !important;
  }

  .lottie,
  .lottie-element {
    display: none !important;
  }

  .scroll {
    animation: none !important;
  }

  .ripple {
    animation: none !important;
  }

  .button.is-secondary::after {
    animation: none !important;
  }

  .marquee_content-wrapper {
    animation: none !important;
  }

  .hero_image-slack-top,
  .hero_image-slack-bottom {
    opacity: 1 !important;
  }
} */



/* All paragraph elements inside Hubspot form */
.hs-form>p {
 margin-top:1rem;
 margin-bottom:1rem;
 }

 /* Set margin right 0 for input wrapper */
 .hs-form .input {
 margin-right: 0 !important;
 }

/* Max width of fieldset element inside form */
.hs-form>fieldset {
 max-width: 100% !important;
 }

/* Form Input */
.hs-input {
 width: 100% !important;
 }

/* Radio Inputs */
.hs-input[type=radio] {
 width: auto !important;
 margin-right: 0.5rem;
 min-height: auto !important;
}

/* Checkbox Labels */
.hs-form-checkbox>label {
font-weight: 400 !important;
}

/* Error messages label margin */
.hs-error-msgs>label {
 margin-bottom: 0px !important;
 }


/*Custom Checkbox*/
.hs-input[type=checkbox] {
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.5rem !important;
  min-height: auto !important;
}

.hs-input[type=checkbox]:focus {
  box-shadow: 0 0 3px 1px #bdfd2e;
}

.hs-input[type=checkbox]:checked {
 accent-color: #111;
 outline: 2px solid #111;
}

.hs-form-booleancheckbox-display>span {
 margin-left: 0 !important;
 }




.fs-toc_link.w--current {
  color: var(--link-color--link-primary) !important;
}

.fs-toc_link.is-h3.w--current, .fs-toc_link.is-h5.w--current, .fs-toc_link.is-h4.w--current {
  color: var(--link-color--link-primary) !important;
}

.blog-rich-text p,
.blog-rich-text h2,
.blog-rich-text h3,
.blog-rich-text h4,
.blog-rich-text h5,
.blog-rich-text h6 {
  margin: 0 !important;
}

.blog-rich-text div[style*="scroll-margin-top:"] {
	display: flex;
  flex-direction: column;
  gap: 36px;
}

.blog-rich-text table {
	border: 1px solid #E1E3E8;
  border-collapse: separate;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.blog-rich-text table thead {
  background: #F7F8F9;
  border-bottom: 1px solid #E1E3E8;
}

.blog-rich-text table thead th {
	border-bottom: 1px solid #E1E3E8;
	border-right: 1px solid #E1E3E8;
	color: #030615;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 10px;
  text-align: center;
}

.blog-rich-text table thead th:last-child {
  border-right: none;
}

.blog-rich-text table tbody td {
	border-bottom: 1px solid #E1E3E8;
  border-right: 1px solid #E1E3E8;
  color: #4B5565;
  font-size: 14px;
  padding: 10px;
  text-align: center;
}

.blog-rich-text table tbody tr:last-child td {
	border-bottom: none;
}

.blog-rich-text table tbody td:last-child {
  border-right: none;
}

.blog-rich-text ul, .blog-rich-text ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.blog-rich-text ul li::marker {
	color: var(--link-color--link-primary) !important;
}

.blog-rich-text ol li::marker {
	font-weight: 500;
}

.blog-rich-text blockquote {
  position: relative;
	background: linear-gradient(to bottom, #4f43DD 30%, #4f43DD30 100%) left / 4px 100% no-repeat;
  border-left: 2px solid transparent;
  color: #121926;
  font-size: 1.85rem;
  font-weight: 600;
  font-style: normal !important;
  line-height: 1.4;
  margin: 0;
  padding: 0.5em 0 1.5em 1em;
}

.blog-rich-text blockquote em {
  font-style: normal !important;
}

.blog-rich-text blockquote sub,
.blog-rich-text blockquote sup {
  font-size: 50%;
  color: #6c737f;
  position: absolute;
  top: auto;
  bottom: 20px;
  left: 30px;
  right: auto;
  font-weight: 400;
}

.blog-rich-text .stat-bar {
  background-color: #F7F7FF;
	background-image: url(/blog-assets/c17e3a9206350305ef94.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  display: flex;
  gap: 16px;
  padding: 32px;
}

.blog-rich-text .stat-bar .stat {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.blog-rich-text .stat-bar .stat strong {
	color: #121926;
	font-size: 48px;
	font-weight: 600;
}

.blog-rich-text .stat-bar .stat span {
	color: #4B5565;
	font-size: 14px;
}

.blog-rich-text figure {
  margin-top: 0;
  margin-bottom: 0;
}

.blog-rich-text figcaption {
	color: #9AA4B2;
  font-size: 14px;
  margin-top: 32px;
}

@media (max-width: 480px) {
  .blog-rich-text .stat-bar {
    flex-direction: column;
  }
}