@font-face {
  src: url("../fonts/GT-America-Standard-Regular.woff");
  font-family: GT-America;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  src: url("../fonts/GT-America-Standard-Medium.woff");
  font-family: GT-America;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  src: url("../fonts/GT-America-Mono-Regular.woff");
  font-family: GT-America-Mono;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

.nav {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  color: white;
  /* $Grey100 */
  background-color: #20262d;
}

.nav-links {
  flex: auto;
  padding-left: 48px;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  line-height: 24px;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.nav-links a.current {
  /* $Blue60 */
  color: #4da2ff;
}

.nav-links a:hover {
  color: white;
}

.nav-links a.current:hover {
  /* $Blue60 */
  color: #4da2ff;
}

.nav-environment-badge {
  font-size: 11px;
  font-family: GT-America-Mono, monospace;
  font-weight: normal;
  text-align: right;
  letter-spacing: 0px;
  border-radius: 4px;
  margin: 4px 16px;
  padding: 0 4px;
}

.nav-environment-badge.local {
  /* $Grey80 */
  background: #505862;
  color: #34ffc7;
}

.nav-environment-badge.staging {
  background: #34ffc7;
  color: black;
}

.nav-environment-badge.production {
  background: red;
  color: white;
  font-weight: bold;
  display: none;
}

.nav-profile {
  position: relative;
  font-size: 14px;
  font-family: GT-America, sans-serif;
  padding-right: 12px;
}

.nav-profile.open {
  background-color: black;
}

.nav-profile-button {
  display: inline-flex;
  justify-content: flex-end;
  height: 24px;
  min-width: 240px;
  align-items: center;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  margin: 0;
}

.nav-profile-button::after {
  margin-top: 1px;
  transform-origin: center;
  display: block;
  box-sizing: border-box;
  transition: transform 0.3s, vertical-align 0.3s;
  margin-left: 4px;
  height: 16px;
  width: 16px;
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8.3l3.4-2.6a1 1 0 011.2 1.6l-4 3a1 1 0 01-1.2 0l-4-3a1 1 0 011.2-1.6L8 8.3z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.nav-profile.open .nav-profile-button::after {
  transform: rotate(180deg);
}

.nav-profile-menu {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 24px;
  right: 0;
  /* $Grey100 */
  background-color: #20262d;
  min-width: 100%;
  padding: 24px;
}

.nav-profile.open .nav-profile-menu {
  display: flex;
  background-color: black;
}

.nav-profile-menu img {
  background-color: rgba(255, 255, 255, 0.6);
  object-fit: cover;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
}

.nav-profile-menu button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  margin: 0;
}

.nav-profile-menu button,
.nav-profile-menu a {
  line-height: 24px;
  min-height: 24px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 8px;
}

.nav-profile-menu a:hover {
  color: white;
}

#dev-mode-enable {
  display: block;
}
#dev-mode-disable {
  display: none;
}
.dev-mode #dev-mode-enable {
  display: none;
}
.dev-mode #dev-mode-disable {
  display: block;
}

.nav-fretlink-logo {
  display: inline-block;
  height: 24px;
  width: 88px;
  background-size: 66px 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='318' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M140.62 15.54A19.42 19.42 0 01159.97 35v.19c0 .76-.02 3.67-.13 6.34l-28.2.05a9.06 9.06 0 008.98 8.06 8.95 8.95 0 007.22-3.6l.2-.29h11.23a19.35 19.35 0 01-3.21 6.54A19.17 19.17 0 01140.62 60a19.42 19.42 0 01-19.35-19.45V35a19.42 19.42 0 0119.35-19.45zM35.1 8.46a10.98 10.98 0 0114.7 16.28 10.94 10.94 0 01-7.77 3.2 20 20 0 00-14.19 5.89 20.01 20.01 0 00-5.88 14.2 10.98 10.98 0 11-19.5-6.93 10.95 10.95 0 018.53-4.05 20 20 0 0014.19-5.88 20 20 0 005.87-14.19 10.97 10.97 0 014.05-8.52zM202.98.1v58.82H191.6V9.37L200.81.1h2.17zm18.53 16.52v42.3h-11.38v-42.3h11.38zM287.54.11v31.36l14.76-14.84h14.18l-20.27 20.4L318 58.93h-14.86l-15.6-15.68v15.68h-11.37V9.37l9.2-9.26h2.17zM96.82 0v9.77h-4.25c-4.27 0-6.26 3.43-6.37 6.86h10.62v9.18H86.2v33.12H74.99V25.8H69v-9.18h6C75.13 7.03 82.96 0 92.56 0h4.25zm152.17 15.52c5.3 0 10.3 2.08 14.05 5.86a19.9 19.9 0 015.82 14.12v23.43h-11.4V35.5a8.48 8.48 0 00-2.48-6.03 8.4 8.4 0 00-6-2.5 8.51 8.51 0 00-8.48 8.53v23.43h-11.4V35.5A19.95 19.95 0 01249 15.52zm-130.8 0v11.46a8.51 8.51 0 00-8.48 8.52v23.43H98.3V35.5a19.95 19.95 0 0119.87-19.98zm58.28-9.94v11.05h8.48v9.18h-8.48v15.94a5.72 5.72 0 005.7 5.72h2.78v11.46h-2.78c-9.43 0-17.1-7.7-17.1-17.18v-26.9l9.23-9.27h2.17zM140.62 25.9a9.05 9.05 0 00-8.76 6.93h17.54a9.05 9.05 0 00-8.78-6.93zM215.8.1a6.05 6.05 0 016.04 6.07c0 3.35-2.7 6.07-6.04 6.07a6.05 6.05 0 01-6.03-6.07c0-3.35 2.7-6.07 6.03-6.07z' fill-rule='evenodd' fill='white' /%3E%3C/svg%3E ");
  /* $Blue70 */
  background-color: #288cff;
}

.nav-profile-picture {
  height: 2.5em;
  width: 2.5em;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 1em;
}

.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  /* $Grey100 */
  background-color: #20262d;
  /* $Grey60 */
  color: #949ca6;
  font-family: GT-America, sans-serif;
  padding-top: 24px;
}

.login-page {
  height: calc(100vh - 24px);
  font-family: GT-America, sans-serif;
  font-weight: 500;
  color: white;
  background-image: url("../images/login-bg.jpg");
  background-size: cover;
  background-position: center center;
  /* $Grey90 */
  background-color: #39414a;
  text-align: center;
}

.login-page .gradient {
  padding-top: 71px;
  /* $Grey90 */
  background-image: linear-gradient(
    180deg,
    #39414a 0%,
    rgba(57, 65, 74, 0) 100%
  );
}

.login-page h1 {
  font-size: 32px;
  line-height: 40px;
  margin: 0;
}

.login-page p {
  width: 360px;
  line-height: 24px;
  margin: auto;
  margin-top: 48px;
  margin-bottom: 50px;
}

.login-page a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  padding-left: 24px;
  padding-right: 24px;
  line-height: 48px;
  height: 48px;
  border-radius: 24px;
  background-color: rgba(0, 25, 54, 0.6);
  color: white;
  font-size: 14px;
  letter-spacing: 0.6px;
}
.login-page a:hover {
  color: white;
}

.internalServicesList {
  display: grid;
  grid-template-columns: repeat(2, 480px);
  grid-column-gap: 80px;
  margin: auto;
  width: max-content;
  margin-top: 92px;
  /* Hide the rule on the bottom row*/
  clip-path: inset(0 0 1px 0);
}

.internalServicesList-service {
  height: 88px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* $Grey90 */
  border-bottom: 1px solid #39414a;
}

.internalServicesList-service a {
  text-decoration: none;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1.25px;
  /* $Grey60 */
  color: #949ca6;
  padding-bottom: 6px;
}
.internalServicesList-service:hover a,
.internalServicesList-service a:focus {
  color: white;
}

.externalServicesList {
  display: grid;
  grid-template-columns: repeat(2, 480px);
  grid-column-gap: 80px;
  margin: auto;
  width: max-content;
  margin-top: 116px;
  /* Hide the rule on the bottom row*/
  clip-path: inset(0 0 1px 0);
}

.externalServicesList-service {
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* $Grey90 */
  border-bottom: 1px solid #39414a;
}

.externalServicesList-service a {
  text-decoration: none;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -1.25px;
  /* $Grey60 */
  color: #949ca6;
}

.dev-mode .externalServicesList-service a::before {
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 12px;
  vertical-align: middle;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.5 12a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm4-2a.5.5 0 110 1 .5.5 0 010-1zm2 0a.5.5 0 110 1 .5.5 0 010-1zm-4 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm8-2a.5.5 0 110 1 .5.5 0 010-1zm-6 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm10-6c.2 0 .4.2.5.4v4.1a.5.5 0 01-1 .1V3.6L8.4 8.4a.5.5 0 01-.8-.7L12.3 3H9.5a.5.5 0 01-.5-.4v-.1c0-.2.2-.4.4-.5h4.1zm-8 4a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm4-2a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1z' fill='%23d8d8d8'/%3E%3C/g%3E%3C/svg%3E");
}

.externalServicesList-service a:hover::before,
.externalServicesList-service a:focus::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.5 12a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm4-2a.5.5 0 110 1 .5.5 0 010-1zm2 0a.5.5 0 110 1 .5.5 0 010-1zm-4 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm8-2a.5.5 0 110 1 .5.5 0 010-1zm-6 0a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm10-6c.2 0 .4.2.5.4v4.1a.5.5 0 01-1 .1V3.6L8.4 8.4a.5.5 0 01-.8-.7L12.3 3H9.5a.5.5 0 01-.5-.4v-.1c0-.2.2-.4.4-.5h4.1zm-8 4a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1zm4-2a.5.5 0 110 1 .5.5 0 010-1zm-2 0a.5.5 0 110 1 .5.5 0 010-1z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
}

.externalServicesList-service:hover a,
.externalServicesList-service a:focus {
  color: white;
}

.token-page-link {
  display: none;
}

.dev-mode .token-page-link {
  margin-right: 12px;
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(3 6)' stroke='%23BABABA'%3E%3Cpath d='M18 8c0 2.76-4.03 5-9 5-4.87 0-8.84-2.15-9-4.83V5c0 2.76 4.03 5 9 5s9-2.24 9-5v3z'/%3E%3Cellipse fill-opacity='.2' fill='%23FFF' cx='9' cy='5' rx='9' ry='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.token-page-link:hover,
.token-page-link:focus {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(3 6)' stroke='%23FFD8EC'%3E%3Cpath d='M18 8c0 2.76-4.03 5-9 5-4.87 0-8.84-2.15-9-4.83V5c0 2.76 4.03 5 9 5s9-2.24 9-5v3z' fill='%23D83789'/%3E%3Cellipse fill='%23FF9FD0' cx='9' cy='5' rx='9' ry='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.token-page-link:active {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(3 6)' stroke='%23FFD8EC'%3E%3Cpath d='M18 8c0 2.76-4.03 5-9 5-4.87 0-8.84-2.15-9-4.83V5c0 2.76 4.03 5 9 5s9-2.24 9-5v3z' fill='%23D83789'/%3E%3Cellipse fill='%23FF9FD0' cx='9' cy='5' rx='9' ry='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(20deg);
}

.starredService {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cfilter x='-5.3%25' y='-5.6%25' width='110.6%25' height='122.2%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' in='shadowOffsetOuter1'/%3E%3C/filter%3E%3Cfilter x='-2.7%25' y='-2.8%25' width='105.3%25' height='116.7%25' filterUnits='objectBoundingBox' id='d'%3E%3CfeOffset dy='1' in='SourceAlpha' result='shadowOffsetInner1'/%3E%3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' operator='arithmetic' k2='-1' k3='1' result='shadowInnerInner1'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.977603 0 0 0 0 0.736871189 0 0 0 1 0' in='shadowInnerInner1'/%3E%3C/filter%3E%3ClinearGradient x1='50%25' y1='.12%25' x2='50%25' y2='100%25' id='c'%3E%3Cstop stop-color='%23FFDF00' stop-opacity='.5' offset='0%25'/%3E%3Cstop stop-color='%23FFDF00' stop-opacity='0' offset='100%25'/%3E%3C/linearGradient%3E%3Cpath d='M12.42 17.53l-4.62 3.3a1 1 0 01-1.54-1.11l1.7-5.42-4.55-3.38a1 1 0 01.58-1.8l5.68-.05 1.8-5.39a1 1 0 011.9 0l1.8 5.39 5.68.05a1 1 0 01.58 1.8l-4.56 3.38 1.7 5.42a1 1 0 01-1.53 1.11l-4.62-3.3z' id='b'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg opacity='.9'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='%23EFCA00' xlink:href='%23b'/%3E%3Cuse fill='url(%23c)' xlink:href='%23b'/%3E%3Cuse fill='%23000' filter='url(%23d)' xlink:href='%23b'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.notstarredService {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cfilter x='-1.3%25' y='-1.4%25' width='102.7%25' height='102.8%25' filterUnits='objectBoundingBox' id='b'%3E%3CfeOffset dy='-.5' in='SourceAlpha' result='shadowOffsetInner1'/%3E%3CfeComposite in='shadowOffsetInner1' in2='SourceAlpha' operator='arithmetic' k2='-1' k3='1' result='shadowInnerInner1'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.234429633 0' in='shadowInnerInner1'/%3E%3C/filter%3E%3Cpath d='M12.42 17.53l-4.62 3.3a1 1 0 01-1.54-1.11l1.7-5.42-4.55-3.38a1 1 0 01.58-1.8l5.68-.05 1.8-5.39a1 1 0 011.9 0l1.8 5.39 5.68.05a1 1 0 01.58 1.8l-4.56 3.38 1.7 5.42a1 1 0 01-1.53 1.11l-4.62-3.3z' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cuse fill='%2313171B' xlink:href='%23a'/%3E%3Cuse fill='%23000' filter='url(%23b)' xlink:href='%23a'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E ");
}

.backendsList {
  display: none;
  grid-template-columns: repeat(2, 480px);
  grid-column-gap: 80px;
  margin: auto;
  width: max-content;
  margin-top: 116px;
  /* Hide the rule on the bottom row*/
  clip-path: inset(0 0 1px 0);
}

.dev-mode .backendsList {
  display: grid;
}

.backendsList-backend {
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* $Grey90 */
  border-bottom: 1px solid #39414a;
}

.backend-token-page-link {
  text-decoration: none;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -1.25px;
  /* $Grey60 */
  color: #949ca6;
}

.backendsList-backend:hover .backend-token-page-link,
.backendsList-backend:focus .backend-token-page-link {
  color: white;
}

.backend-token-page-link::before {
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 12px;
  vertical-align: middle;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(3 6)' stroke='%23BABABA'%3E%3Cpath d='M18 8c0 2.76-4.03 5-9 5-4.87 0-8.84-2.15-9-4.83V5c0 2.76 4.03 5 9 5s9-2.24 9-5v3z'/%3E%3Cellipse fill-opacity='.2' fill='%23FFF' cx='9' cy='5' rx='9' ry='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.backend-token-page-link:hover::before,
.backend-token-page-link:focus::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(3 6)' stroke='%23FFD8EC'%3E%3Cpath d='M18 8c0 2.76-4.03 5-9 5-4.87 0-8.84-2.15-9-4.83V5c0 2.76 4.03 5 9 5s9-2.24 9-5v3z' fill='%23D83789'/%3E%3Cellipse fill='%23FF9FD0' cx='9' cy='5' rx='9' ry='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.backend-token-page-link:active::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(3 6)' stroke='%23FFD8EC'%3E%3Cpath d='M18 8c0 2.76-4.03 5-9 5-4.87 0-8.84-2.15-9-4.83V5c0 2.76 4.03 5 9 5s9-2.24 9-5v3z' fill='%23D83789'/%3E%3Cellipse fill='%23FF9FD0' cx='9' cy='5' rx='9' ry='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(20deg);
}

.tokenPage {
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}

.tokenPage a {
  /* $Grey60 */
  color: #949ca6;
}

.tokenPage a:hover,
.tokenPage a:focus {
  color: white;
}

.tokenPage-backendName {
  color: white;
}

.tokenPage-rawToken, .tokenPage-databaseUrlContent {
  color: white;
  /* $Grey100 */
  background-color: #20262d;
  border: 1px solid black;
  padding: 0.5em;
  width: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
  user-select: all;
}

.tokenPage-tokenDescription {
  border: 1px solid;
  padding: 0.5em;
  white-space: pre-wrap;
}