/** Shopify CDN: Minification failed

Line 508:0 Expected "}" to go with "{"

**/
/* title */
.hdt-article-title a {
  --hdt-pd-y: var(--spacing-0-6);
  --hdt-pd-x: var(--spacing-1-4);
  --hdt-border-color: rgb(var(--color-link) / .1);
  margin-bottom: 20px;
}
.hdt-article-image{
  margin-bottom: 32px;
}
.hdt-main-article .hdt-article-metas .hdt-article-author{
	margin-inline-end:4px;
}
/* tags */
.hdt-article-tags > div{
 gap:9px;
}
.hdt-article-social >div{
  gap:20px;
  @media (min-width: 768px) {
	.hdt-article-social_name {
		display: none;
	}
	.hdt-socials__size-large {
		--width-icon: 41px;
		--height-icon: 41px;
	}
  }
}
.hdt-article-tags a{
  --hdt-pd-y: var(--spacing-0-6);
  --hdt-pd-x: var(--spacing-1-4);
  margin-inline-start: 0 !important;
}
.hdt-article-tags .hdt-filter-tag {
	color: rgb(var(--color-link));
	background-color: transparent;
  border: var(--thickness-btn) solid rgb(var(--color-link));
  padding: var(--hdt-pd-y) var(--hdt-pd-x);
  border-radius: var(--radius-button);
  transition: .3s all;
}
.hdt-article-tags .hdt-filter-tag:hover {
  color: rgb(var(--color-accent));
  border-color: rgb(var(--color-accent));
}
/* *** */
.hdt-main-article .hdt-comments-form__heading {
	text-transform: uppercase;
	margin-bottom: 5px;
	color: rgb(var(--color-foreground));
}
.hdt-main-article .required{
	color:rgb(var(--color-error-text));
}
.hdt-col_avatar_cm{
	width: auto;
	flex: 0 0 auto;
}
.hdt-comment__date{
	font-style: italic;
}
.hdt-comment-info{
	gap:7px;
	flex-direction: column;
}
.hdt-main-article .hdt-comment-metas {
	gap: 20px;
}
.hdt-main-article .hdt-pagination-wrapp {
	margin-top:25px;
}
.hdt-main-article .hdt-comments-form__notes {
	margin-bottom: 30px;
	color: rgb(var(--color-foreground2));
}
.hdt-main-article .hdt-comments-heading {
	margin-bottom: 30px;
	color: rgb(var(--color-foreground));
}
.hdt-main-article .hdt-message-error {
	gap: 10px;
	padding-top: 5px;
	color: rgb(var(--color-error-text));
}
.hdt-main-article .hdt-form-message--error {
	padding: 2rem;
	background-color: rgb(var(--color-error-background));
	border: 1px solid rgb(var(--color-error-text));
}
.hdt-main-article .hdt-form-message--error ul {
	padding-inline-start: 30px;
	list-style: unset;
}
.hdt-main-article .hdt-form-message--error ul li::marker {
	color: rgb(var(--color-error-text));
}
.hdt-main-article .hdt-form-group,
.hdt-article-template__comment-warning {
	margin-bottom: 25px;
}
.hdt-main-article .hdt-line-space {
	margin: 40px 0;
	border-bottom: 1px solid rgb(var(--color-button-border));
}
.hdt-main-article .hdt-article-comments-block .hdt-form-comment {
	column-gap: 15px;
	row-gap: 0px;
}
.hdt-main-article input[type="date"],input[type="email"],input[type="number"],input[type="password"],input[type="tel"],input[type="text"],input[type="url"],.hdt-main-article select,.hdt-main-article textarea {
	width: 100%;
	height: 40px;
	box-shadow: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.hdt-main-article #CommentForm-body {
	min-height: 150px;
	overflow: hidden;
	padding: 10px 15px;
}
:is(.hdt-form__label,.hdt-field__label){
	color:rgb(var(--color-foreground));
}
:is(#CommentForm-email , #CommentForm-body , #CommentForm-author){
	border: 1px solid rgb(var(--color-line-border));
  outline: none;
	color: rgb(var(--color-input-secondary));
  background-color: rgb(var(--color-input-primary));
}
:is(#CommentForm-email , #CommentForm-author){
	padding:0 15px;
}
.hdt-main-article .hdt-form-message{
	margin-bottom:10px;
}
.hdt-main-article  .hdt-form-message--success{
	color:rgb(var(--color-success-text));
}
.hdt-main-article .hdt-article-template__comment-warning {
	font-style: italic;
}
.hdt-main-article .hdt-article-navigation {
	display: flex;
	flex-direction: column;
	gap: 15px;
	.hdt-art-nav {
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		gap: .7rem;
		font-size: 18px;
	}
	.hdt-article-next {
		.hdt-art-nav {
			flex-direction: row-reverse;
			align-self: flex-start;
		}
	}
}
.hdt-main-article .hdt-button-navigation {
	width: var(--spacing-2-6);
	height: var(--spacing-2-6);
	border-radius: var(--radius-full);
	border: 1px solid rgb(var(--color-button-border));
	flex: 0 0 auto;
	max-width: 48px;
	transition: all 0.5s ease;
}
.hdt-article-navigation :is(.hdt-article-nav_btn, .hdt-article-title a) {
	transition: all 0.5s ease;
}
.hdt-button-navigation svg {
	width: 5px;
	height: 10px;
}
.hdt-main-article .hdt-article-navigation .hdt-article-inner {

}
.hdt-main-article .hdt-article-navigation .hdt-article-item {
	display: flex;
	padding: 0px;
	flex-direction: column;
	gap: 10px;
}
.hdt-main-article .hdt-article-tags-social {
	/* margin-bottom: 20px; */
}
.hdt-main-article .hdt-top-heading {
	margin-bottom: calc(52px * 0.75);
}
/* dot */
.hdt-main-article__dots {
	margin-bottom: 1.3rem;
}
.hdt-main-article__dots {
  gap: 10px;
}
.hdt-main-article__dots .hdt-slider__dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  position: relative;
  border: solid 1px transparent;
}
.hdt-main-article__dots .hdt-slider__dot.hdt-slider__dot--selected {
  border-color: rgb(var(--color-link));
}
.hdt-main-article__dots .hdt-slider__dot::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  height: 6px;
  background-color: rgb(var(--color-link));
  border-radius: var(--radius-full);
  margin: auto;
}
.hdt-main-article .hdt-main-article__dots {
	padding-top: calc(var(--spacing-dot) * 0.5);
}
/* *** */
.hdt-main-article :is(.hdt-article-image, .hdt-article-content, .hdt-main-article-heading, .hdt-article-tags-social, .hdt-article-comments-block, .hdt-article-navigation, .hdt-article-related){
	/* margin-bottom: calc(var(--spacing-bottom) * 0.75); */
}

.hdt-main-article {
	.hdt-article-navigation {
		.hdt-article-title {
			font-size: 18px;
			margin-bottom: 17px;
		}
	}
}
.hdt-article-navigation {
	.hdt-article-inner {
		display: flex;
		flex-direction: row;
		border-radius: var(--radius-blog-card);
		overflow: hidden;
		height: 100%;
	}
	.hdt-article-thumb {
		width: min(230px, 37%);
		flex: none;
		border-radius: 0;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.hdt-article-content_wapper {
		flex-grow: 1;
		padding: 30px;
	}
	.hdt-estimate-reding-time {
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		gap: 4.5px;
		margin-bottom: 15px;
		&:before, &:after {
			content: '';
			display: block;
			position: relative;
			z-index: 1;
			width: 7px;
			height: 7px;
			background-color: #FF6B4F;
			border-radius: 50%;
		}
	}
	.hdt-art-content {
		font-size: 12px;
	}
}

@media (min-width: 768px) {
	
}

/*================ c17. Blog post ================*/
.hdt-main-article-page .hdt-rte {
  h1, h2, h3, h4, h5, h6 {
    font-family: 'D-DIN-BOLD';
  }
  h1 { font-size: 26px; }
  h2 { font-size: 24px; }
  h3 { font-size: 22px; }
  h4 { font-size: 20px; }
  h5 { font-size: 18px; }
  h6 { font-size: 16px; }
}

.hdt-toc-wrap {
  background: var(--toc-bg-color);
  padding: 35px 55px;
  border-radius: var(--radius);
  font-family: 'D-DIN-BOLD';
  &:empty {
	display: none;
  }
  .hdt-toc-title {
	font-size: 24px;
  }
  .hdt-toc {
	li {
		text-decoration: underline;
		+ li {
			margin-top: 10px;
		}
	}
	.hdt-toc-list {
		margin-top: 10px;
	}
	.hdt-toc-sublist {
		margin-top: 10px;
		padding-inline-start: 30px;
	}
  }
  + article {
	margin-top: 38px;
  }
}

.hdt-article-au-info {
	display: flex;
	flex-direction: column;
    align-items: stretch;
	gap: 15px;
	.hdt-author-info {
		display: inline-flex;
		align-items: center;
		gap: 20px;
		.hdt-author-avatar {
			display: block;
			width: 57px;
			height: 57px;
			flex: none;
			overflow: hidden;
			border-radius: 50%;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.hdt-author-name {
		font-size: 12px;
		a {
			text-decoration: underline;
		}
	}
	.hdt-author-social-handle {
		font-size: 10px;
	}
	.hdt-author-description {
		font-size: 10px;
	}
	.hdt-post-date {
		font-size: 12px;
	}
}

.hdt-article-estimate-reading {
	.hdt-estimate-reding-time {
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		gap: 4.5px;
		margin-bottom: 15px;
		background-color: #F7FF8D;
		padding: 7px 16px;
		&:before, &:after {
			content: '';
			display: block;
			position: relative;
			z-index: 1;
			width: 7px;
			height: 7px;
			background-color: rgb(var(--color-foreground));
			border-radius: 50%;
		}
	}
}

.hdt-article-desc {
    line-height: 20px;
}

@media(min-width:768px){
  /* dot */
	.hdt-main-article__dots {
		gap: 20px;
	}
	.hdt-main-article__dots .hdt-slider__dot{
    width: 20px;
    height: 20px;
  }
  .hdt-main-article__dots .hdt-slider__dot::before {
    width: 8px;
    height: 8px;
  }
  /*  */
  .hdt-main-article .hdt-form-comment .hdt-CommentForm {
		grid-column: span 2;
	}
	.hdt-main-article .hdt-article-navigation .hdt-article-item {
		flex-grow: 1;
		width: 100%;
	}
	.hdt-main-article .hdt-article-nav_btn {
		margin-bottom: 13px;
	}
	.hdt-main-article .hdt-button-navigation {
		width: var(--spacing-3);
		height: var(--spacing-3);
	}
	.hdt-main-article .hdt-button-navigation svg {
		width: 7px;
		height: 11px;
	}
	.hdt-main-article .hdt-top-heading {
		margin-bottom: calc(52px * 0.85);
	}
	.hdt-main-article .hdt-main-article__dots {
		padding-top: var(--spacing-dot);
	}

	.hdt-article-au-info {
		flex-direction: row;
		gap: 20px;
		.hdt-post-date {
			border-inline-start: 1px solid rgb(var(--color-foreground));
			padding-inline-start: 20px;
			display: inline-flex;
			align-items: center;
		}
	}
}
@media (min-width: 992px) {
	.hdt-main-article .hdt-article-navigation {
		.hdt-art-nav {
			font-size: 24px;
		}
		.hdt-article-next {
			.hdt-art-nav {
				flex-direction: row-reverse;
				align-self: flex-end;
			}
		}
	}
	.hdt-main-article .hdt-article-navigation {
		gap: 30px;
		flex-direction: row;
	}
}
@media (min-width: 1150px) {
  /* **** */
	.hdt-main-article .hdt-top-heading {
		margin-bottom: 52px;
	}
	.hdt-main-article .hdt-button-navigation {
		width: var(--spacing-4-8);
		height: var(--spacing-4-8);
	}
}
@media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1150px) {
  .hdt-main-article .hdt-button-navigation:hover {
    border: 1px solid rgb(var(--color-secondary-button-text));
		background-color: rgb(var(--color-secondary-button-text));
    color: rgb(var(--color-secondary-button));
    color: rgb(var(--color-secondary-button, 255 255 255));
  }
  .hdt-main-article .hdt-article-navigation :is(.hdt-article-nav_btn, .hdt-article-title a):hover {
    color: rgb(var(--color-accent));
  }
}

@media (min-width: 1360px) {
	.hdt-main-article .hdt-article-navigation {
		gap: 75px;
		.hdt-article-title {
			font-size: 24px;
		}
	}