.monospace {
  font-family: $font-family-monospace;
}

.icon-down {
  content: 'Y';
  font-family: 'icon-works';
}

.icon-up {
  content: 'y';
  font-family: 'icon-works';
}

.base-font {
  font-family: $font-family-base
}

.icon-font {
  font-family: icon-works;
}

.text-accent {
  color: $brand-accent !important;
}

.text-danger-dark {
  color: $state-danger-text;
}

.text-link {
  color: $link-color !important;
  &:hover {
    text-decoration: underline !important;
  }
}

.header-info-icon {
  padding-left: 2rem;
  background-image: url('data:image/svg+xml, <svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-292.000000, -765.000000)"><g id="info-primary" transform="translate(292.000000, 765.000000)"><g id="Info" fill="#0075ff"><circle id="Oval" cx="15" cy="15" r="15"></circle></g><path d="M14.8429803,9.93618267 C14.5449492,9.93618267 14.3180427,9.86548666 14.1622537,9.72409251 C14.0064647,9.58269836 13.9285714,9.36387736 13.9285714,9.06762295 L13.9285714,8.58284543 C13.9285714,8.28659102 14.0064647,8.06777003 14.1622537,7.92637588 C14.3180427,7.78498173 14.5449492,7.71428571 14.8429803,7.71428571 L15.3916256,7.71428571 C15.6896567,7.71428571 15.9131766,7.78498173 16.0621921,7.92637588 C16.2112076,8.06777003 16.2857143,8.28659102 16.2857143,8.58284543 L16.2857143,9.06762295 C16.2857143,9.36387736 16.2112076,9.58269836 16.0621921,9.72409251 C15.9131766,9.86548666 15.6896567,9.93618267 15.3916256,9.93618267 L14.8429803,9.93618267 Z M14.0098522,21.6112412 L14.0098522,13.5316159 C14.0098522,13.2353615 14.0877455,13.013174 14.2435345,12.8650468 C14.3993234,12.7169196 14.62623,12.6428571 14.9242611,12.6428571 L15.3103448,12.6428571 C15.6083759,12.6428571 15.8318958,12.7169196 15.9809113,12.8650468 C16.1299269,13.013174 16.2044335,13.2353615 16.2044335,13.5316159 L16.2044335,21.6112412 C16.2044335,21.9074956 16.1299269,22.1296831 15.9809113,22.2778103 C15.8318958,22.4259375 15.6083759,22.5 15.3103448,22.5 L14.9242611,22.5 C14.62623,22.5 14.3993234,22.4259375 14.2435345,22.2778103 C14.0877455,22.1296831 14.0098522,21.9074956 14.0098522,21.6112412 Z" id="i" fill="#FFFFFF"></path></g></g></svg>');

  background-position: 0 .5rem;
  background-repeat: no-repeat;
  background-size: 1rem;
}

.paragraph-info-icon {
  padding-left: .5rem;
  background-image: url('data:image/svg+xml, <svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-292.000000, -765.000000)"><g id="info-primary" transform="translate(292.000000, 765.000000)"><g id="Info" fill="#0075ff"><circle id="Oval" cx="15" cy="15" r="15"></circle></g><path d="M14.8429803,9.93618267 C14.5449492,9.93618267 14.3180427,9.86548666 14.1622537,9.72409251 C14.0064647,9.58269836 13.9285714,9.36387736 13.9285714,9.06762295 L13.9285714,8.58284543 C13.9285714,8.28659102 14.0064647,8.06777003 14.1622537,7.92637588 C14.3180427,7.78498173 14.5449492,7.71428571 14.8429803,7.71428571 L15.3916256,7.71428571 C15.6896567,7.71428571 15.9131766,7.78498173 16.0621921,7.92637588 C16.2112076,8.06777003 16.2857143,8.28659102 16.2857143,8.58284543 L16.2857143,9.06762295 C16.2857143,9.36387736 16.2112076,9.58269836 16.0621921,9.72409251 C15.9131766,9.86548666 15.6896567,9.93618267 15.3916256,9.93618267 L14.8429803,9.93618267 Z M14.0098522,21.6112412 L14.0098522,13.5316159 C14.0098522,13.2353615 14.0877455,13.013174 14.2435345,12.8650468 C14.3993234,12.7169196 14.62623,12.6428571 14.9242611,12.6428571 L15.3103448,12.6428571 C15.6083759,12.6428571 15.8318958,12.7169196 15.9809113,12.8650468 C16.1299269,13.013174 16.2044335,13.2353615 16.2044335,13.5316159 L16.2044335,21.6112412 C16.2044335,21.9074956 16.1299269,22.1296831 15.9809113,22.2778103 C15.8318958,22.4259375 15.6083759,22.5 15.3103448,22.5 L14.9242611,22.5 C14.62623,22.5 14.3993234,22.4259375 14.2435345,22.2778103 C14.0877455,22.1296831 14.0098522,21.9074956 14.0098522,21.6112412 Z" id="i" fill="#FFFFFF"></path></g></g></svg>');

  background-position: left;
  background-repeat: no-repeat;
  background-size: 1rem;
}

.api-icon {
  background-image: url('data:image/svg+xml, <svg width="47" height="28"  xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="#3C4858" width="46.667" height="28" rx="2"/><path d="M15.315 9.928l-1.436 5.152h2.872l-1.436-5.152zm-.823-1.2h1.652l3.081 10.067h-1.409l-.741-2.623h-3.527l-.728 2.623h-1.409l3.081-10.067zm7.673 1.12v3.782h1.578c.629 0 1.12-.166 1.473-.499.353-.333.53-.798.53-1.396 0-.597-.176-1.062-.527-1.392-.35-.33-.842-.496-1.476-.496h-1.578zm-1.362-1.12h2.94c1.123 0 1.975.255 2.555.766.58.51.87 1.257.87 2.241 0 .994-.289 1.744-.867 2.252-.577.508-1.43.762-2.558.762h-1.578v4.046h-1.362V8.728zm8.34 0h5.59v1.146h-2.11v7.774h2.11v1.147h-5.59v-1.147h2.11V9.874h-2.11V8.728z" fill="#FFF"/></g></svg>');
  background-repeat: no-repeat;
  background-size: 26px;
  background-position: center;
}

.api-icon-gray {
  background-image: url('data:image/svg+xml, <svg height="28" viewBox="0 0 47 28" width="47" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform=""><rect fill="#bec8d4" height="28" rx="2" width="46.666667"/><path d="m15.3148973 9.92840325-1.4361088 5.15111305h2.8722175zm-.82256-1.20012842h1.6518622l3.0812286 10.06624567h-1.4091396l-.7416524-2.6227525h-3.52622l-.7281678 2.6227525h-1.4091396zm7.6727312 1.11922089v3.78242718h1.5776969c.629284 0 1.1203429-.1663082 1.4731914-.4989297.3528485-.3326216.5292701-.7978352.5292701-1.395655s-.1752979-1.0619098-.525899-1.3922838c-.3506011-.3303741-.8427836-.49555868-1.4765625-.49555868zm-1.3619435-1.11922089h2.9396404c1.1237214 0 1.9754894.25508092 2.5553296.76525043.5798403.51016954.869756 1.25743304.869756 2.24181294 0 .9933697-.288792 1.7440043-.8663848 2.2519264-.5775928.507922-1.4304845.7618792-2.5587008.7618792h-1.5776969v4.0453767h-1.3619435zm8.3402183 0h5.5893622v1.14619007h-2.1103382v7.7738656h2.1103382v1.14619h-5.5893622v-1.14619h2.1103382v-7.7738656h-2.1103382z" fill="#fff"/></g></svg>');
  background-repeat: no-repeat;
  background-size: 26px;
  background-position: center;
}

.browser-icon {
  background-image: url('data:image/svg+xml, <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M15.174 29.601c8.188 0 14.826-6.58 14.826-14.698 0-3.53-1.255-6.77-3.348-9.304A14.847 14.847 0 0 0 15.174.204C6.985.204.347 6.785.347 14.903.347 23.02 6.985 29.6 15.174 29.6z" fill="#FFE36A"/><path d="M1.32 20.905c-.346-.72-.42-1.075-.644-1.583-.169-.381-.307-1.046-.393-1.555-.07-.411-.098-.682-.14-.928-.128-.752-.079-2.57-.079-2.57s.062-1.08.255-2.197c.109-.632.308-1.268.441-1.744C1.15 8.935 2.42 6.752 2.42 6.752s2.24 2.254 4.288 4.635c1.18 1.372.601.8 1.595 1.692.993.892.063-.116.927.882 2.041 2.357.57 3.49 1.032 4.03.461.538 2.632 2.078 3.655 2.212 2.23.294 6.837-2.637 6.837-2.637l-5.396 12.117s-.045.074-1.195-.026c-1.672-.146-4.841-.635-8.09-2.978a16.644 16.644 0 0 1-1.694-1.482C3.39 24.203 2.5 22.951 2.5 22.951s-.062.05-.744-1.281c-.161-.314-.33-.543-.438-.765z" fill="#71DE85"/><path d="M17.377.238c-1.47-.255-1.468-.175-1.468-.175s-.655-.068-1.492-.028c-.463.022-.982.112-1.476.18a15.5 15.5 0 0 0-2.147.467C4.348 2.697 2.113 7.485 2.113 7.485s7.163 9.934 7.6 10.374c.44.44-1.06-4.72-.322-3.958.454.463 1.835 1.98 1.835 1.98.745-1.43-.98-4.012 0-5.015.723-.74.2-.861.907-.907.706-.046-2.296.217.808 0 3.104-.218-1.651-.796 1.476-1.005.912-.061-3.243.062-1.476 0 1.192-.042-1.587.058.28 0 .998-.031 1.453-.274 2.775-.315 5.116-.16 12.463-.159 12.463-.159s-.203-.45-.478-.951c-.24-.435-.572-.883-.978-1.417-.131-.173-.287-.38-.451-.592-.245-.317-.508-.596-.736-.843-.244-.265-.472-.535-.688-.727-.303-.272-.581-.493-.844-.717-.878-.754-1.468-1.082-2.144-1.432-.494-.256-1.564-.846-2.296-1.017C19.14.62 18.847.39 17.377.238z" fill="#F6524F"/><path d="M15.251 20.859c3.304 0 5.982-2.655 5.982-5.93 0-3.276-2.678-5.931-5.982-5.931-3.304 0-5.982 2.655-5.982 5.93 0 3.276 2.678 5.93 5.982 5.93z" stroke="#FFF" stroke-width=".716" fill="#66B7F9"/></g></svg>');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
}

.browser-icon-gray {
  background-image: url('data:image/svg+xml, <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform=""><path d="m15.1736328 29.601227c8.1883769 0 14.8263672-6.5806813 14.8263672-14.698364 0-3.5302101-1.2553753-6.7697429-3.3476999-9.3037847-2.718955-3.29296159-6.851244-5.39457932-11.4786673-5.39457932-8.18837695 0-14.82636726 6.58068131-14.82636726 14.69836402 0 8.1176827 6.63799031 14.698364 14.82636726 14.698364z" fill="#f0f5fa"/><path d="m1.31946206 20.9045373c-.34580686-.71917-.41970982-1.074906-.64390329-1.5822661-.16860667-.3815646-.30630888-1.0460853-.39243552-1.5554983-.06952557-.4112229-.09799176-.6818551-.13979945-.9276668-.12783748-.751631-.07919256-2.5695358-.07919256-2.5695358s.06211444-1.080885.25462332-2.1976054c.10894267-.6319635.30839588-1.2682216.4412984-1.7443354.38883068-1.39295866 1.65873587-3.5751696 1.65873587-3.5751696s2.23987364 2.25402903 4.28805506 4.6344338c1.18088348 1.3724276.60113639.8005942 1.59471327 1.6924484.99357685.8918543.06323154-.115847.92750424.8821559 2.0410371 2.3568498.57032401 3.4902744 1.0317195 4.0288785.4613955.5386041 2.6320001 2.0784871 3.6550673 2.2129895 2.2301819.2932016 6.8373536-2.6377147 6.8373536-2.6377147l-5.3963207 12.1171011s-.0451772.0746608-1.1946095-.0256197c-1.6719025-.1458624-4.84166538-.635267-8.09064747-2.9784731-.34181281-.2465196-1.09116761-.8746205-1.69392261-1.4814154-.98794872-.9945702-1.876703-2.2457501-1.876703-2.2457501s-.06219077.0502963-.74426367-1.2816362c-.16094228-.3142835-.33047626-.5432173-.43727279-.7653206z" fill="#e0e6ed"/><path d="m17.3767944.23784223c-1.4704113-.25489695-1.4678136-.17478205-1.4678136-.17478205s-.6554743-.0679638-1.4922273-.02841859c-.4632278.02189229-.9820129.11218967-1.4759011.1810661-.8456242.11792866-1.7448594.34053446-2.1467436.46613756-6.44619857 2.01466539-8.6815789 6.80273781-8.6815789 6.80273781s7.16309694 9.93488394 7.60133343 10.37432824c.43823657.4394442-1.06177328-4.7205871-.32311811-3.9583733.45383561.4635449 1.83552198 1.9810838 1.83552198 1.9810838.7443419-1.431545-.9811645-4.012413-.0000002-5.0157177.722732-.7390407.2000621-.8612957.9063489-.90696329.7062869-.04566753-2.29563162.21749959.8082368 0 3.1038683-.21749956-1.6510118-.79599252 1.4759009-1.00504246.9122015-.06098529-3.2432222.06250545-1.4759009 0 1.1917308-.04214834-1.5866461.05786791.2803731 0 .9974311-.03091519 1.4524285-.27362176 2.7750369-.31482077 5.1154525-.15934543 12.4630996-.15894085 12.4630996-.15894085s-.2034286-.45093541-.4785277-.95127955c-.2391914-.435036-.5715506-.88247375-.9782668-1.41730428-.1309095-.17214568-.2865834-.37902694-.45073-.59177846-.2444202-.31679474-.5076261-.59548046-.7358299-.84300684-.2437813-.2644228-.4719418-.53429524-.6875412-.72726732-.303366-.27152749-.5818625-.49202237-.8440131-.7169217-.8788963-.75400582-1.4689529-1.08190646-2.1440228-1.43178782-.4942621-.25617058-1.5642289-.84592302-2.2963682-1.01669605-.7050311-.16445-.9968569-.39360499-2.4672682-.54625248z" fill="#bec8d4"/><path d="m15.2509877 20.8588957c3.3038321 0 5.9821169-2.6551618 5.9821169-5.9304703s-2.6782848-5.93047039-5.9821169-5.93047039c-3.303832 0-5.98211683 2.65516189-5.98211683 5.93047039s2.67828483 5.9304703 5.98211683 5.9304703z" fill="#8492a6" stroke="#fff" stroke-width=".715556"/></g></svg>');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
}



pre.pre-dark {
  background-color: $gray-dark;
  color: $gray-lighter;
  .btn-icon {
    color: $gray-light;
  }
}
