/*vars*/
/*Layout*/
body {
  padding: 0;
  margin: 0;
  -webkit-transition: padding-top 0.5s;
  transition: padding-top 0.5s;
  color: #333333;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  background-color: #f2f2f2;
}

.wrapper {
  display: -ms-grid;
  display: grid;
  height: 100%;
  min-height: 100vh;
  -ms-grid-columns: ([col] 1fr)[5];
      grid-template-columns: repeat(5, [col] 1fr);
  -ms-grid-rows: [row] 50px [row] 1fr;
      grid-template-rows: [row] 50px [row] 1fr;
  max-width: 100%;
}

.lefttopgutter {
  grid-column: col 1;
  grid-row: row 1;
  background-color: #1565c0;
  -webkit-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
}

.topbar {
  grid-column: col 2 / span 2;
  grid-row: row 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  background-color: #1565c0;
  -webkit-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
}

.topbar h1 {
  color: white;
}

.righttopgutter {
  grid-column: col 4 / span 2;
  grid-row: row 1;
  background-color: #1565c0;
  -webkit-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
}

.leftgutter {
  grid-column: col 1;
  grid-row: row 2;
}

.content {
  grid-column: col 2 / span 3;
  grid-row: row 2;
  padding: 4px;
}

.rightgutter {
  grid-column: col 5;
  grid-row: row 2;
}

.topbar {
  padding: 0 4px;
}

.pages .content {
  grid-column: col 2 / span 2;
  grid-row: row 2;
}

.landing .wrapper {
  -ms-grid-columns: [col] 1fr [col] 1fr [col] 200px [col] minmax(280px, 1fr) [col] 1fr;
      grid-template-columns: [col] 1fr [col] 1fr [col] 200px [col] minmax(280px, 1fr) [col] 1fr;
  -ms-grid-rows: [row] 1fr [row] 40px;
      grid-template-rows: [row] 1fr [row] 40px;
}

.landing .leftgutter {
  grid-column: col 1 / span 1;
  grid-row: row 1;
}

.landing .content {
  grid-column: col 2 / span 3;
  grid-row: row 1;
  margin-right: 60px;
}

.landing .content .contentwrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
}

.landing .content .contentcontainer {
  max-width: 100%;
  margin-right: 20px;
}

.landing .content .contentcontainer a {
  color: #0d47a1;
}

.landing .content .built-with-linx {
  float: right;
  margin-top: -14px;
  padding-left: 20px;
}

.landing .rightgutter {
  grid-column: col 5 / span 1;
  grid-row: row 1 / span 2;
  background-color: #1565c0;
  -webkit-box-shadow: -10px 0px 10px 1px rgba(0, 0, 0, 0.2);
          box-shadow: -10px 0px 10px 1px rgba(0, 0, 0, 0.2);
}

.landing .footergutter {
  grid-column: col 1 / span 1;
  grid-row: row 2;
  background-color: #0d47a1;
}

.landing .footer {
  grid-column: col 2 / span 3;
  grid-row: row 2;
  background-color: #0d47a1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.landing .footer > div {
  display: inline-block;
  padding-left: 10px;
  font-size: 12px;
}

.landing .footer a {
  color: white;
}

.template h2,
.documentation h2 {
  margin-top: 20px;
}

.template hr,
.documentation hr {
  margin: 20px 0 0 0;
}

.template li,
.documentation li {
  padding-bottom: 10px;
}

.template .content a,
.documentation .content a {
  color: #0d47a1;
}

.jumplist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 80px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.jumplist div {
  margin: 6px 0;
  line-height: 22px;
}

.menu {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.scrollToTop {
  width: 45px;
  height: 45px;
  padding: 10px;
  text-align: center;
  position: fixed;
  right: 10px;
  bottom: 15px;
  display: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5Mi4wMDIgNDkyLjAwMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzQxYTlkNSIgZD0iTTQ4NC4xMzYsMzI4LjQ3M0wyNjQuOTg4LDEwOS4zMjljLTUuMDY0LTUuMDY0LTExLjgxNi03Ljg0NC0xOS4xNzItNy44NDRjLTcuMjA4LDAtMTMuOTY0LDIuNzgtMTkuMDIsNy44NDQgTDcuODUyLDMyOC4yNjVDMi43ODgsMzMzLjMzMywwLDM0MC4wODksMCwzNDcuMjk3YzAsNy4yMDgsMi43ODQsMTMuOTY4LDcuODUyLDE5LjAzMmwxNi4xMjQsMTYuMTI0IGM1LjA2NCw1LjA2NCwxMS44MjQsNy44NiwxOS4wMzIsNy44NnMxMy45NjQtMi43OTYsMTkuMDMyLTcuODZsMTgzLjg1Mi0xODMuODUybDE4NC4wNTYsMTg0LjA2NCBjNS4wNjQsNS4wNiwxMS44Miw3Ljg1MiwxOS4wMzIsNy44NTJjNy4yMDgsMCwxMy45Ni0yLjc5MiwxOS4wMjgtNy44NTJsMTYuMTI4LTE2LjEzMiBDNDk0LjYyNCwzNTYuMDQxLDQ5NC42MjQsMzM4Ljk2NSw0ODQuMTM2LDMyOC40NzN6Ii8+PC9zdmc+Cg==");
  background-position: center center;
  background-size: 22px 25px;
  background-repeat: no-repeat;
  background-color: rgba(119, 119, 119, 0.1);
  border: 1px solid transparent;
  border-radius: 6px;
}

.scrollToTop:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
          box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.apikeys {
  position: relative;
  max-width: 500px;
  background-color: #dddddd;
  -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 1px 16px 10px 16px;
  border-radius: 16px;
}

.apikeys .formField {
  -ms-grid-columns: 150px 320px;
      grid-template-columns: 150px 320px;
}

.apikeys .generatedKey {
  color: #313131;
  text-align: center;
}

.apikeys button {
  cursor: pointer;
}

.apikeys button:hover {
  -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/*content*/
.hero {
  font-size: 50px;
  font-weight: bold;
  font-family: "Nunito", sans-serif;
  color: #0d47a1;
  padding-bottom: 0;
  margin-top: 40px;
}

.byline {
  font-family: "Roboto", sans-serif;
  color: #333333;
  font-weight: normal;
  font-size: 18px;
  margin-top: 18px;
}

.landingOL {
  margin: 10px;
  padding: 0 10px;
}

.landingOL li {
  line-height: 26px;
}

p,
ul,
ol {
  margin: 10px 0;
}

h1,
h2,
h3 {
  font-family: "Nunito", sans-serif;
  font-weight: bold;
}

h1 a,
h2 a,
h3 a {
  color: #0d47a1;
}

h1 {
  margin: 6px 0;
  color: #0d47a1;
}

h2,
h3 {
  color: #1565c0;
  margin: 30px 0 0 0;
}

a {
  color: white;
}

ul.ticks {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

ul.ticks li {
  padding-left: 1em;
  text-indent: -1em;
}

ul.ticks li:before {
  content: "\2713";
  padding-right: 5px;
  color: #2eb398;
}

button,
.button {
  background-color: #0d47a1;
  border-radius: 4px;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  padding: 6px 10px;
  outline: 0;
  border: 0;
}

.link {
  color: white;
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
}

.small {
  font-style: italic;
  font-size: 14px;
}

.smaller {
  font-style: italic;
  font-size: 12px;
}

pre {
  font-size: 14px;
  font-weight: bold;
  background-color: #ddd;
  display: inline-block;
  padding: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

.loading {
  position: relative;
}

.overlay {
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  position: absolute;
  top: -2px;
  left: -2px;
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: -2px;
  border-radius: 4px;
}

.overlayfull {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#channelswrapper {
  text-align: center;
  margin: 30px 15px 10px 0;
}

.channels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  gap: 40px;
}

.channels > div {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.channels > div img {
  display: block;
  width: 36px;
  height: 36px;
}

.terms {
  font-family: "Roboto Slab", serif;
  font-size: 16px;
  max-width: 600px;
}

.terms li {
  margin-bottom: 20px;
}

#forgotpassword {
  margin-top: 6px;
}

#diagram {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 1;
  height: 160px;
  padding-left: 20px;
}

#diagram > img {
  width: 100%;
  height: 100%;
  max-width: 534px;
}

.fadeout {
  opacity: 0;
}

.contactForm {
  display: inline-block;
}

.contactForm .formField span {
  color: #0d47a1;
}

.contactForm input,
.contactForm textarea {
  border: 1px solid #ccc;
}

.contactForm .fieldError {
  border: 2px solid #c41e4a;
}

/*forms*/
input,
textarea,
select {
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  background-color: #f9f9f9;
  border-radius: 4px;
  outline: 0;
  color: #0d47a1;
  padding: 2px;
  border: none;
}

.landing .formField {
  display: block;
}

.formField {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 150px 240px;
      grid-template-columns: 150px 240px;
  margin-bottom: 6px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.formField span {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}

.formField span img {
  float: right;
  margin: 5px;
}

.landingformwrapper {
  padding: 6px;
  display: inline-block;
}

.formwrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.formwrapper > form {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 460px;
  max-height: 400px;
  padding: 10px;
  overflow: none;
  border: 1px solid black;
  border-radius: 6px;
  -webkit-box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 3px 3px 10px 10px rgba(0, 0, 0, 0.2);
  background-color: #e6e6e6;
  color: #333333;
}

.formwrapper h2 {
  margin: -10px -10px 10px -10px;
  padding: 6px 10px;
  background-color: #0d47a1;
  color: white;
  font-size: 20px;
}

.formwrapper .formField span {
  color: #333333;
}

.formwrapper .errorMsg {
  color: #c41e4a;
}

#editform .formField,
#addform .formField {
  -ms-grid-columns: 150px 300px;
      grid-template-columns: 150px 300px;
}

select:invalid {
  color: gray;
}

.errorMsg {
  color: white;
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
  font-size: 12px;
}

.fieldError {
  border: 2px solid #c41e4a;
}

/*messagebar*/
.toppadding {
  padding-top: 20px;
}

#msgBar {
  background-color: white;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  max-height: 0;
  position: fixed;
  max-width: 360px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
  color: black;
  z-index: 10;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-box-shadow: 0 8px 2px -2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 8px 2px -2px rgba(0, 0, 0, 0.5);
  padding: 12px;
  margin-top: -30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#msgBar button {
  display: block;
  padding: 20px;
  float: right;
}

#msgBar span {
  font-family: "Nunito", sans-serif;
  grid-column: col 2 / span 3;
  margin-right: 10px;
}

#msgBar.visible {
  max-height: 300px;
  margin-top: 0;
}

/*tables*/
table {
  border-collapse: collapse;
  color: #0d47a1;
  border: 1px solid #0d47a1;
}

table thead {
  background-color: #1565c0;
}

table th {
  font-weight: bold;
  padding: 4px;
  text-align: left;
  font-size: 16px;
  color: white;
}

table tr:nth-child(even) {
  background: rgba(21, 101, 192, 0.1);
}

table td {
  padding: 4px 6px;
  border: 0;
  font-size: 14px;
}

table td a {
  color: #0d47a1;
}

.infoCell {
  word-break: break-all;
}

.tablewrapper {
  display: -ms-inline-grid;
  display: inline-grid;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
  width: 100%;
}

.addformbutton {
  justify-self: flex-end;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

#pagesTable {
  grid-column: span 2;
}

#pageurldisplay {
  word-break: break-all;
}

/*Utils*/
.show-inline {
  display: inline-block;
}

.show {
  display: block;
}

.hide {
  display: none;
}

/*Spinner*/
.spinner {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  z-index: 2;
  max-width: 50px;
  max-height: 50px;
  height: 100%;
  width: 100%;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*Captcha*/
:root {
  --bg: #71a8f0;
}

#generated-captcha {
  text-decoration: line-through;
  font-weight: normal;
  text-align: center;
  font-size: 26px;
  border-radius: 6px;
  border: none;
  padding: 6px;
  outline: none;
  color: #535353;
  max-width: 200px;
  display: inline-block;
}

#gen {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-image: url(../images/redo.svg);
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: center;
  cursor: pointer;
}

.pattern_1 {
  background-color: var(--bg);
  opacity: 1;
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #ffffff 6px), repeating-linear-gradient(var(--bg), var(--bg));
}

.pattern_2 {
  background-color: #ffffff;
  opacity: 1;
  background-image: linear-gradient(135deg, var(--bg) 25%, transparent 25%), linear-gradient(225deg, var(--bg) 25%, transparent 25%), linear-gradient(45deg, var(--bg) 25%, transparent 25%), linear-gradient(315deg, var(--bg) 25%, #ffffff 25%);
  background-position: 6px 0, 6px 0, 0 0, 0 0;
  background-size: 6px 6px;
  background-repeat: repeat;
}

.pattern_3 {
  background-color: #ffffff;
  opacity: 1;
  background-image: linear-gradient(135deg, var(--bg) 25%, transparent 25%), linear-gradient(225deg, var(--bg) 25%, transparent 25%), linear-gradient(45deg, var(--bg) 25%, transparent 25%), linear-gradient(315deg, var(--bg) 25%, #ffffff 25%);
  background-position: 6px 0, 6px 0, 0 0, 0 0;
  background-size: 12px 12px;
  background-repeat: repeat;
}

.pattern_4 {
  background-color: #ffffff;
  opacity: 1;
  background: linear-gradient(135deg, var(--bg) 25%, transparent 25%) -6px 0/12px 12px, linear-gradient(225deg, var(--bg) 25%, transparent 25%) -6px 0/12px 12px, linear-gradient(315deg, var(--bg) 25%, transparent 25%) 0px 0/12px 12px, linear-gradient(45deg, var(--bg) 25%, #ffffff 25%) 0px 0/12px 12px;
}

.pattern_5 {
  background-color: #ffffff;
  opacity: 1;
  background-image: radial-gradient(ellipse farthest-corner at 6px 6px, var(--bg), var(--bg) 50%, #ffffff 50%);
  background-size: 6px 6px;
}

.pattern_6 {
  background-color: #ffffff;
  opacity: 1;
  background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 3px, #ffffff 3px, #ffffff 7px);
}

.pattern_7 {
  background-color: #ffffff;
  opacity: 1;
  background: repeating-linear-gradient(-45deg, var(--bg), var(--bg) 3px, #ffffff 3px, #ffffff 7px);
}

.pattern_8 {
  background-color: #ffffff;
  opacity: 1;
  background-image: linear-gradient(var(--bg) 1.2px, transparent 1.2px), linear-gradient(90deg, var(--bg) 1.2px, transparent 1.2px), linear-gradient(var(--bg) 0.6px, transparent 0.6px), linear-gradient(90deg, var(--bg) 0.6px, #ffffff 0.6px);
  background-size: 30px 30px, 30px 30px, 6px 6px, 6px 6px;
  background-position: -1.2000000000000002px -1.2000000000000002px, -1.2000000000000002px -1.2000000000000002px, -0.6000000000000001px -0.6000000000000001px, -0.6000000000000001px -0.6000000000000001px;
}

.pattern_9 {
  background-color: #ffffff;
  opacity: 1;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #ffffff), color-stop(50%, var(--bg)));
  background-image: linear-gradient(0deg, #ffffff 50%, var(--bg) 50%);
  background-size: 6px 6px;
}

.pattern_10 {
  background-color: #ffffff;
  opacity: 1;
  background-image: linear-gradient(to right, var(--bg), var(--bg) 3px, #ffffff 3px, #ffffff);
  background-size: 6px 100%;
}

.pattern_11 {
  background-color: #ffffff;
  opacity: 1;
  background-size: 6px 6px;
  background-image: repeating-linear-gradient(45deg, var(--bg) 0, var(--bg) 2px, #ffffff 0, #ffffff 50%);
}

.pattern_12 {
  background-color: #ffffff;
  opacity: 1;
  background-image: linear-gradient(45deg, var(--bg) 50%, #ffffff 50%);
  background-size: 6px 6px;
}

.pattern_13 {
  background-color: #ffffff;
  opacity: 1;
  background-image: linear-gradient(-45deg, #ffffff, #ffffff 50%, var(--bg) 50%, var(--bg));
  background-size: 6px 6px;
}

.pattern_14 {
  background-color: #ffffff;
  opacity: 1;
  background-image: repeating-linear-gradient(45deg, var(--bg) 25%, transparent 25%, transparent 75%, var(--bg) 75%, var(--bg)), repeating-linear-gradient(45deg, var(--bg) 25%, #ffffff 25%, #ffffff 75%, var(--bg) 75%, var(--bg));
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
}

/*Media Queries*/
@media only screen and (max-width: 1700px) {
  .landing .content {
    margin-right: 30px;
  }
  .channels {
    gap: 20px;
  }
}

@media only screen and (max-width: 1279px) {
  .wrapper {
    -ms-grid-columns: ([col] 1fr)[1];
        grid-template-columns: repeat(1, [col] 1fr);
    -ms-grid-rows: [row] 50px [row] 1fr;
        grid-template-rows: [row] 50px [row] 1fr;
  }
  .leftgutter,
  .rightgutter {
    display: none;
  }
  .topbar {
    grid-column: col 1 / span 1;
  }
  .content {
    grid-column: col 1 / span 1;
    grid-row: row 2;
    padding: 20px;
  }
  .landing .content {
    margin-right: 10px;
  }
  .msg {
    grid-column: col 1 / span 5;
  }
  .landing .content .built-with-linx {
    margin-top: -20px;
  }
  .pages .wrapper {
    -ms-grid-columns: ([col] 1fr)[3];
        grid-template-columns: repeat(3, [col] 1fr);
    -ms-grid-rows: [row] 50px [row] 1fr;
        grid-template-rows: [row] 50px [row] 1fr;
  }
  .pages .lefttopgutter,
  .pages .righttopgutter {
    display: none;
  }
  .pages .topbar {
    grid-column: col 1 / span 3;
  }
  .pages .content {
    grid-column: col 1 / span 2;
    grid-row: row 2;
  }
  .pages .menu {
    margin-right: 20px;
  }
  .landing .wrapper {
    -ms-grid-columns: [col] 1fr [col] 200px;
        grid-template-columns: [col] 1fr [col] 200px;
  }
  .landing .content {
    grid-column: col 1 / span 2;
    grid-row: row 1;
  }
  .landing .content .contentcontainer {
    max-width: 80%;
  }
  .landing .footer {
    grid-column: col 1 / span 2;
    grid-row: row 2 / span 1;
  }
}

@media only screen and (max-width: 800px) {
  body,
  .link,
  input,
  select,
  textarea,
  button,
  .footer a {
    font-size: 120%;
  }
  .tab {
    min-width: 60px;
  }
  .landing .wrapper {
    -ms-grid-columns: [col] 1fr;
        grid-template-columns: [col] 1fr;
    -ms-grid-rows: [row] auto [row] auto [row] 50px;
        grid-template-rows: [row] auto [row] auto [row] 50px;
  }
  .landing .content {
    grid-column: col 1 / span 1;
    grid-row: row 1;
  }
  .landing .content .contentwrapper {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  .landing .content .contentcontainer:nth-child(1) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .landing .content .contentcontainer {
    max-width: 100%;
  }
  .landing .sidebar {
    grid-column: col 1 / span 1;
    grid-row: row 2 / span 1;
  }
  .landing .footer {
    grid-column: col 1 / span 1;
    grid-row: row 3 / span 1;
  }
  .pages .wrapper {
    -ms-grid-columns: ([col] 1fr)[1];
        grid-template-columns: repeat(1, [col] 1fr);
    -ms-grid-rows: [row] 50px [row] 1fr [row] auto;
        grid-template-rows: [row] 50px [row] 1fr [row] auto;
  }
  .pages .topbar {
    grid-column: col 1;
    grid-row: row 1;
  }
  .pages .content {
    grid-column: col 1;
    grid-row: row 2;
  }
  .apikeys .formField {
    -ms-grid-columns: 140px auto;
        grid-template-columns: 140px auto;
    max-width: 100%;
  }
}
/*# sourceMappingURL=styles.css.map */