/*  Variables
/*-------------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
/*  Add custom styles here
/*-------------------------------------------------- */
.shopify-challenge__container {
  padding: 55px; }

/* Button */
/*-------------------------- */
.shopify-challenge__button {
  background-color: #edac0e;
  border-color: #edac0e;
  color: #ffffff;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 8px 15px;
  font-family: "Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;
  letter-spacing: 0.08em;
  white-space: normal;
  font-size: 14px; }

.shopify-challenge__button:active, .shopify-challenge__button:visited {
  background-color: #edac0e;
  border-color: #edac0e;
  color: #ffffff; }

.shopify-challenge__button:focus, .shopify-challenge__button:hover {
  background-color: #be932a;
  border-color: #be932a;
  color: #ffffff; }

.shopify-challenge__button.secondary {
  background-color: #b3b7bd;
  border-color: #b3b7bd;
  color: #ffffff; }

.shopify-challenge__button.secondary:active, .shopify-challenge__button.secondary:visited {
  background-color: #b3b7bd;
  border-color: #b3b7bd;
  color: #ffffff; }

.shopify-challenge__button.secondary:focus, .shopify-challenge__button.secondary:hover {
  background-color: #cacdd0;
  border-color: #cacdd0;
  color: #ffffff; }

.shopify-challenge__button.outlined {
  background-color: transparent;
  color: #edac0e; }

.shopify-challenge__button.outlined:focus, .shopify-challenge__button.outlined:hover {
  background-color: #edac0e;
  border-color: #edac0e;
  color: #ffffff; }

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.1em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Ubuntu Mono" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 16px !important;
  min-height: inherit !important;
  min-height: auto !important; }

.tabs-content .syntaxhighlighter {
  margin: 0 !important; }

.syntaxhighlighter {
  width: 100% !important;
  margin: 0 0 1.625em 0 !important;
  position: relative !important;
  /*overflow: auto !important;*/
  font-size: 1em !important;
  overflow: auto;
  color: white; }

.syntaxhighlighter.scroll {
  max-height: 500px !important; }

.syntaxhighlighter.source {
  overflow: hidden !important; }

.syntaxhighlighter .bold {
  font-weight: bold !important; }

.syntaxhighlighter .italic {
  font-style: italic !important; }

.syntaxhighlighter .line {
  white-space: pre !important; }

.syntaxhighlighter table {
  width: 100% !important; }

.syntaxhighlighter table caption {
  text-align: left !important;
  padding: .5em 0 0.5em 1em !important; }

.syntaxhighlighter table td.code {
  width: 100% !important; }

.syntaxhighlighter table td.code .container {
  position: relative !important; }

.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  padding-left: 1em !important;
  overflow: hidden !important;
  white-space: pre !important; }

.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important; }

.syntaxhighlighter table td.code .line {
  padding: 0 1em !important; }

.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
  padding-left: 0em !important; }

.syntaxhighlighter.show {
  display: block !important; }

.syntaxhighlighter.collapsed table {
  display: none !important; }

.syntaxhighlighter.collapsed .toolbar {
  padding: 0.1em 0.8em 0em 0.8em !important;
  font-size: 1em !important;
  position: static !important;
  width: auto !important;
  height: auto !important; }

.syntaxhighlighter.collapsed .toolbar span {
  display: inline !important;
  margin-right: 1em !important; }

.syntaxhighlighter.collapsed .toolbar span a {
  padding: 0 !important;
  display: none !important; }

.syntaxhighlighter.collapsed .toolbar span a.expandSource {
  display: inline !important; }

.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
  display: none; }

.syntaxhighlighter .toolbar span.title {
  display: inline !important; }

.syntaxhighlighter .toolbar a {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding-top: 1px !important; }

.syntaxhighlighter .toolbar a.expandSource {
  display: none !important; }

.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 1px 0 !important; }

.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important; }

.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important; }

.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
  background: none !important; }

.syntaxhighlighter.printing .line .number {
  color: #bbbbbb !important; }

.syntaxhighlighter.printing .line .content {
  color: black !important; }

.syntaxhighlighter.printing .toolbar {
  display: none !important; }

.syntaxhighlighter.printing a {
  text-decoration: none !important; }

.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
  color: black !important; }

.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
  color: #008200 !important; }

.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
  color: blue !important; }

.syntaxhighlighter.printing .keyword {
  color: #006699 !important;
  font-weight: bold !important; }

.syntaxhighlighter.printing .preprocessor {
  color: gray !important; }

.syntaxhighlighter.printing .variable {
  color: #aa7700 !important; }

.syntaxhighlighter.printing .value {
  color: #009900 !important; }

.syntaxhighlighter.printing .functions {
  color: #ff1493 !important; }

.syntaxhighlighter.printing .constants {
  color: #0066cc !important; }

.syntaxhighlighter.printing .script {
  font-weight: bold !important; }

.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important; }

.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
  color: #ff1493 !important; }

.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
  color: red !important; }

.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
  color: black !important; }

.syntaxhighlighter {
  background-color: #282823 !important;
  padding: 8px 0 8px 0 !important; }

.syntaxhighlighter .line.alt1 {
  background-color: #282823 !important; }

.syntaxhighlighter .line.alt2 {
  background-color: #282823 !important; }

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important; }

.syntaxhighlighter .line.highlighted.number {
  color: white !important; }

.syntaxhighlighter table caption {
  color: black !important; }

.syntaxhighlighter .gutter {
  color: #afafaf !important; }

.syntaxhighlighter .gutter .line {
  border-right: 3px solid #282823 !important; }

.syntaxhighlighter .gutter .line.highlighted {
  background-color: #282823 !important;
  color: white !important; }

.syntaxhighlighter.printing .line .content {
  border: none !important; }

.syntaxhighlighter.collapsed {
  overflow: visible !important; }

.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #282823 !important; }

.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important; }

.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important; }

.syntaxhighlighter .toolbar {
  color: white !important;
  background: #282823 !important;
  border: none !important;
  visibility: hidden; }

.syntaxhighlighter .toolbar a {
  color: white !important; }

.syntaxhighlighter .toolbar a:hover {
  color: black !important; }

.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: white !important; }

.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #969696 !important; }

.syntaxhighlighter .string, .syntaxhighlighter .string a {
  color: #BFBF0A !important; }

.syntaxhighlighter .keyword {
  color: #0ABFBF !important;
  font-weight: bold !important; }

.syntaxhighlighter .signed {
  color: #0ABFBF !important; }

.syntaxhighlighter .module {
  color: #fbcb34 !important;
  font-weight: bold !important; }

.syntaxhighlighter .type {
  color: #0A8DBF !important; }

.syntaxhighlighter .operator {
  color: #ED4343 !important; }

.syntaxhighlighter .preprocessor {
  color: gray !important; }

.syntaxhighlighter .variable {
  color: #aa7700 !important; }

.syntaxhighlighter .value {
  color: #A269DC !important; }

.syntaxhighlighter .function {
  color: #1BDDAF !important; }

.syntaxhighlighter .constant {
  color: #D45ADA !important; }

.syntaxhighlighter .namespace {
  color: #DA5A8C !important; }

.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #006699 !important;
  background-color: none !important; }

.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
  color: gray !important; }

.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
  color: #ff1493 !important; }

.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
  color: red !important; }

/*  Add custom responsive styles here
/*-------------------------------------------------- */