/*
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
@access private
@param {Number} $value - Pixel value to convert.
@param {Number} $base [null] - Base for pixel conversion.
@returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
*/
/*
Removes the unit (e.g. px, em, rem) from a value, returning the number only.
@param {Number} $num - Number to strip unit from.
@returns {Number} The same number, sans unit.
*/
/*
Converts one or more pixel values into matching rem values.
@param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.

@param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.

@returns {List} A list of converted values.
*/
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
	background: transparent;
}

:not(pre)>code[class*=language-], pre[class*=language-] {
	border-radius: 10px;
}

body {
	font-family: sofia-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #75787b;
}

h1,h2,h3,h4,h5,h6 {
	font-family: sofia-pro, sans-serif;
	font-weight: 700;
}

h1 {
	font-size: 36px;
}

  pre {
	font-size: 0.875rem !important;
  }

  .tab-pane {
	display: none;
  }

  .tab-pane.active {
	display: block;
  }

  .smooth-scroll {
	padding: 40px 40px 40px 340px;
	height: auto;
	will-change: auto;
  }

  .block-guide-landing.smooth-scroll {
	  padding: 40px;
  }

  /* .logged-in.smooth-scroll {
	  margin-top: 32px;
  } */

  .sq-guide {
	background-color: #000;
  }

  .sq-sidebar {
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 300px;
	overflow: scroll;
	box-shadow: 4px 0px 14px 0px rgba(0, 0, 0, 0.05);
  }

  .logged-in .sq-sidebar {
	  top: 32px;
  }

  .sq-sidebar__title {
	color: #fff;
	font-size: 1.125rem;
	padding: 0.625rem 1.25rem;
	font-weight: bold;
	flex-grow: 1;
  }

  .sq-sidebar__number {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	display: inline-block;
	font-weight: bold;
	padding: 0.3125rem 0.9375rem;
	border-radius: 3.125rem;
	font-size: 0.75rem;
	margin-top: 0.625rem;
	margin-right: 0.625rem;
  }

  .sq-sidebar a {
	display: block;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	padding: 10px 20px;
	transition: background-color 0.2s ease-out;
	font-weight: 400;
  }

  .sq-sidebar__heading {
	display: flex !important;
	width: 100%;
	/* border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0; */
	align-items: flex-start;
	background-color: #000;
	position: sticky;
	top: 0;
	padding: 10px 0 !important;
  }

  .sq-sidebar a:hover {
	background-color: #000;
  }

  .sq-sidebar a.active {
	font-weight: bold;
	background-color: #fff;
	color: #000;
  }

  section {
	margin-top: 3.75rem;
  }

  .sq-tabs {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-bottom: 3.125rem;
  }

  .sq-tabs li a {
	color: #FFF;
	font-weight: bold;
	font-size: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 3.125rem;
	padding: 5px 20px 8px;
	transition: all 0.2s ease-out;
	margin-right: 0.625rem;
	cursor: pointer;
	text-decoration: none;
	display: block;
  }

  .sq-tabs li a:hover {
	background-color: #000;
  }

  .sq-tabs li:last-of-type {
	margin-right: 0;
  }

  .sq-tabs li.active a {
	border-color: #2f1217;
	background-color: #FFF;
	color: #000;
  }

  .sq-notice {
	font-size: 16px;
	background-color: rgba(255, 255, 255, 0.1);
	color: #75787b;
	padding: 1.875rem;
	margin-top: 2.5rem;
	border-radius: 10px;
  }

  .sq-notice h3 {
	font-size: 18px;
	margin-top: 30px;
  }

  .sq-notice h3:first-of-type {
	  margin-top: 0;
  }

  .sq-notice span {
	color: #fff !important;
  }

  .sq-code {
	font-size: 14px;
	background-color: #222;
	color: #fff;
	padding: 1.875rem;
	border: 1px solid #f0f0f0;
	margin-top: 2.5rem;
  }

  .sq-code span {
	color: #fff !important;
  }

  .sq-title {
	margin-top: 0;
	color: #fff;
	margin-bottom: 60px;
  }

  .sq-table {
	display: flex;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.1);
	margin-top: 20px;
	margin-bottom: 80px;
	border-radius: 10px;
	overflow: hidden;
  }

  .sq-table a {
	color: #2f1217;
  }

  .sq-table-row {
	display: flex;
  }

  .sq-table-row--head {
	background-color: rgba(255, 255, 255, 0.1);
	color: #75787b;
	font-weight: bold;
  }

  .sq-block-demo {
	border: 1px solid #ededed;
	background-color: #fff;
	position: relative;
  }

  .sq-block-demo__link {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #000;
	color: #fff;
	padding: 8px 10px 10px;
	font-size: 14px;
	text-decoration: none;
	display: flex;
	align-items: center;
	line-height: 1;
	gap: 10px;
	min-width: 135px;
  }

  .sq-block-demo__link svg {
	max-width: 16px;
	flex-shrink: 0;
  }

  .sq-block-demo__link span {
	flex-grow: 1;
	display: flex;
	flex-wrap: nowrap;
  }

  .sq-block-demo__link svg path {
	fill: #fff;
  }

  .sq-table-column {
	flex: 1 1 0;
	padding: 10px;
	/* border: 1px solid rgba(255, 255, 255, 0.05); */
	font-size: 15px;
  }

  .sq-table-row--small .sq-table-column {
	font-size: 14px;
	background-color: rgba(255, 255, 255, 0.1);
  }

  .swiper-pagination {
	  position: relative;
	  bottom: auto !important;
	  margin-top: 40px;
  }

  .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 6px !important;
  }

  .swiper-pagination-bullet-active {
	  background: #2f1217;
  }

  .guide-card {
	  width: 100%;
	  padding: 30px;
	  border-radius: 5px;
	  display: block;
	  text-decoration: none;
	  color: #2f1217;
	  box-shadow: 4px 0px 14px 0px rgb(0 0 0 / 5%);
	  min-height: 200px;
	  transition: all 0.3s ease-out;
	  background-color: rgba(255, 255, 255, 0.1);
  }

  .guide-card:hover {
	  background-color: #f5f5f5;
  }

  .guide-card__title {
	  color: #fff;
	  font-weight: 700;
	  font-size: 20px;
  }

  .guide-card:hover .guide-card__title {
	color: #000;
}

  /* #wpadminbar {
	  display: none;
  } */

  /*# sourceMappingURL=guide.css.map */