/* basic required HTML styles */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  background-color: rgb(237, 237, 237);
  color: rgb(66, 81, 90);
  font-family: Catamaran, sans-serif;
  font-size: 1rem;
}

nav {
  color: rgb(85, 100, 109);
  margin: 0;
  padding: 0;
}

  nav a {
    color: rgb(85, 100, 109);
    cursor: pointer;
    margin-top: 1rem;
    text-decoration: none;
  }

  nav a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
  }

  nav .nav-header:hover a,
  nav .nav-header:hover a,
  nav .navigation-image.help:hover a,
  nav .navigation-image.help:hover a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
  }

h1 {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 3rem;
  margin: 0;
  padding: 1rem 0 0 0;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.75rem;
}

h3 {
  color: rgb(145, 153, 158);
  font-size: 1.25rem;
  font-weight: 300;
}

b {
  font-weight: 600;
}

.grid_container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 260px 1fr 400px;
  grid-template-rows: 1fr;
  grid-template-areas:
    "nav body sidebar"
}

.grid-navigation {
  background-color: rgb(25, 36, 42);
  grid-area: nav;
  height: 100%;
}

.grid-body {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(25, 36, 42, 0.1);
  grid-area: body;
  padding: 1.5rem 3rem;
  margin: 1.875rem 0.625rem 1.875rem 1.25rem;
}

  .grid-body section {
    border-top: 1px solid rgb(221, 224, 225);
    margin: 2.5rem 0;
  }

  .grid-body a {
    color: rgb(41, 187, 179);
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.15s ease-in-out 0s
  }

    .grid-body a:hover {
      color: rgb(25, 143, 137);
    }

    .grid-body a.warning-link {
      color: rgb(237, 51, 37);
      font-size: 0.875rem;
    }


.grid-sidebar {
  grid-area: sidebar;
  margin: 1.875rem 1.2rem 1.625rem 0.65rem;
}

  .grid-sidebar h2 {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 3rem;
    margin: 0;
    padding: 0.5rem 0;
  }

  .grid-sidebar section {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(25, 36, 42, 0.1);
    box-sizing: border-box;
    margin-bottom: 1.2rem;
    padding: 1.5rem 2rem 3rem 2rem;
    min-height: 16.75rem;
  }

  .grid-sidebar section p {
    margin: 0;
    padding: 0.75rem 0 1.5rem 0;
  }

  .grid-sidebar section a {
    display: inline-block;
  }

.nav-header {
  background-color: rgb(13, 19, 23);
  box-sizing: border-box;
  padding: 1.5rem 2rem 1.5rem 0.75rem;
  width: 100%
}

  .nav-header a {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    font-weight: 700;
    justify-content: space-between;
    margin-top: 1rem;
  }

  .nav-header img {
    width: 1.25rem;
  }

#navigation-items {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1px;
  list-style: none;
  margin: 0.5rem 2rem 1rem 2rem;
  padding: 0;
}

  #navigation-items li {
    display: block;
    margin: 0;
    padding: 0;
  }

  #navigation-items > li {
    border-bottom: 1px solid rgb(13, 19, 23);
    padding: 0.25rem 0 0.75rem 0;
  }

  #navigation-items > li:last-child {
    border-bottom: none;
    padding: 4rem 0 0 0;
  }

  #navigation-items li > a {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 1rem 0;
  }

  #navigation-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

    #navigation-items ul li {
      margin: 0.625rem 0;
    }

  #navigation-items .first-item {
    font-size: 1.125rem;
    font-weight: 600
  }

  #navigation-items .navigation-image a::before,
  .navigation-back-image a::before,
  .upgrade a.transparent-upgrade::before {
    background: no-repeat center/contain;
    content: '';
    display: inline-block;
    height: 1.25rem;
    margin-right: 0.75rem;
    width: 1.25rem;
  }

button, a.button, input.button {
  background-color: rgb(41, 187, 179);
  border-radius: 3px;
  border-style: none;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: inline-block;
  font-family: Catamaran, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2rem;
  padding: 0.875rem 1.5rem;
  text-align: center;
  transition: background-color, color, border-color 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
}

  button:hover, a.button:hover, input.button:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(25, 143, 137);
  }

  button.warning, a.button.warning, input.button.warning {
    color: rgb(255, 255, 255);
    background-color: rgb(237,51,37);
  }

  button.warning:hover, a.button.warning:hover, input.button.warning:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(188, 32, 37);
  }

  button.highlight, a.button.highlight, input.button.highlight {
    background: linear-gradient(134.36deg, rgb(246, 181, 21) 0%, rgb(246, 151, 21) 100%);
  }

  button:disabled, a.button:disabled, input.button:disabled {
    background-color: rgb(145, 153, 158);
    cursor: default;
  }

a.button {
  text-decoration: none;
}

button.text-button, a.text-button, input.text-button {
  background-color: transparent;
  border-style: none;
  color: rgb(41, 187, 179);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 0.875rem;
  padding: 0;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
}

  button.text-button:hover,
  a.text-button:hover,
  input.text-button:hover {
    color: rgb(25, 143, 137);
  }

  button.text-button::after,
  a.text-button::after,
  input.text-button::after {
    background-color: rgb(41, 187, 179);
    bottom: 0px;
    content: '';
    height: 1px;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    width: 100%;
  }

    button.text-button:hover::after,
    a.text-button:hover::after,
    input.text-button:hover::after {
      background-color: rgb(25, 143, 137);
    }

  button.text-button.warning,
  a.text-button.warning,
  input.text-button.warning {
    color: rgb(237,51,37);
  }

    button.text-button.warning:hover,
    a.text-button.warning:hover,
    input.text-button.warning:hover {
      color: rgb(188, 32, 37);
    }

    button.text-button.warning::after,
    a.text-button.warning::after,
    input.text-button.warning::after {
      background-color: rgb(237,51,37);
    }

    button.text-button.warning:hover::after,
    a.text-button.warning:hover::after,
    input.text-button.warning:hover::after {
      background-color: rgb(188, 32, 37);
    }

  button.text-button.add::after,
  a.text-button.add::after,
  input.text-button.add::after {
    height: 0px;
  }

a.add, button.add {
  align-items: center;
  display: flex;
  flex-direction: row;
  font-size: 0.75rem;
  font-weight: 800;
  justify-content: flex-end;
  text-decoration: none;
}

  a.add::before, button.add::before {
    background: no-repeat center/contain;
    content: '';
    display: inline-block;
    height: 1rem;
    width: 1rem;
  }

  a.add:hover, button.add:hover {
    color: rgb(25, 143, 137);
  }

  a.add.disabled, button.add:disabled {
    color: rgb(145, 153, 158);
    cursor: auto;
  }

  a:hover.add.disabled, button:hover.add.disabled {
    color: rgb(145, 153, 158);
    cursor: auto;
  }

a.link {
  background-color: transparent;
  background-image: linear-gradient(to right, rgb(41, 187, 179) 100%, rgb(41, 187, 179) 100%);
  background-position: 0 1rem;
  background-repeat: repeat-x;
  border: none;
  background-size: 2px 2px;
  color: rgb(41, 187, 179);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0;
  text-decoration: none;
}

  a.link:hover {
    color: rgb(25, 143, 137);
    background-image: linear-gradient(to right, rgb(25, 143, 137) 100%, rgb(25, 143, 137) 100%);
  }

input, select, textarea {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(221, 224, 225);
  border-radius: 2px;
  box-sizing: border-box;
  color: rgb(25, 36, 42);
  font-family: Catamaran, sans-serif;
  font-size: 0.875rem;
  padding: 0.375rem;
}

  input:focus, select:focus, textarea:focus {
    border-color: rgb(41, 187, 179);
    box-shadow: 0 0 1px 1px rgb(41, 187, 179);
  }

  input::placeholder, select::placeholder, textarea::placeholder {
    color: transparent;
  }

.h2-section {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 2.5rem 0 2rem 0;
  width: 100%;
}

  .h2-section h2, .h2-section a {
    margin: 0;
    padding: 0;
  }

  .h2-section h2 {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .h2-section h2 img {
    margin-right: 1rem;
    width: 2rem;
  }

.account_form p {
  display: block;
}

.account_form p label {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  color: rgb(41, 187, 179);
}

.account_form p input {
  display: block;
  font-size: 1rem;
}

.messages {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  width: 100%;
}

  .messages > li {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0.125rem 0;
    padding: 1rem;
  }

  .messages > li.debug, .messages > li.info, .messages > li.success {
    background-color: rgb(246, 190, 21);
  }

  .messages > li.warning, .messages > li.critical {
    border: 2px solid rgb(188, 32, 37);
    background-color: initial;
    padding: 0.5rem;
  }

  .messages > li > span {
    width: 100%;
  }
  .messages > li > .close-message-image {
    cursor: pointer;
  }

.form-errors {
  box-sizing: border-box;
  border: 2px solid rgb(188, 32, 37);
  color: rgb(188, 32, 37);
  font-size: 0.75rem;
  font-weight: 700;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
}

  .form-errors:empty {
    border: none;
    padding: 0;
  }

.error {
  color: rgb(237, 51, 37);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0;
}

  .error .errorlist {
    color: rgb(237, 51, 37);
    font-size: 0.75rem;
    font-weight: 700;
    list-style: none;
    margin: 0;
    padding: 0;
  }

    .error .errorlist li {
      margin: 0;
      padding: 0.25rem 0;
    }

.hide {
  display: none !important;;
}

.form-field {
  display: block;
  padding: 0.5rem 0;
}

  .form-field > label > span {
    color: rgb(41, 187, 179);
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 0.75rem;
    padding: 0.3rem 0;
  }

  .form-field > label > input,
  .form-field > label > select {
    display: block;
    width: 100%;
  }

.label {
  color: rgb(41, 187, 179);
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 0.75rem;
  padding: 0.3rem 0;
}

input[type="checkbox"] {
  display: none;
}

  input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    font-size: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
    margin: 0 0.5rem 0 0;
    padding: 0.0625rem 0 0 0.125rem;
    vertical-align: -0.0625rem;
    width: 1.125rem;
  }

input[type="radio"] {
  display: none;
}

  input[type="radio"] + label::before {
    content: '';
    display: inline-block;
    font-size: 1.125rem;
    height: 1.1875rem;
    line-height: 1.125rem;
    margin: 0 0.5rem 0 0;
    padding: 0.0625rem 0 0 0.125rem;
    vertical-align: -0.0625rem;
    width: 1.125rem;
  }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgb(255, 255, 255);
}

.form-buttons {
  padding: 1rem 0;
  vertical-align: middle;
}

  .form-buttons a {
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 0.875rem;
    margin-left: 2rem;
  }

  .form-buttons a.text-button::after {
    bottom: 2px;
  }

  .upgrade {
    align-items: center;
    background: linear-gradient(134.36deg, rgb(246, 181, 21) 0%, rgb(246, 151, 21) 100%);
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    font-size: 0.75rem;
    font-weight: 600;
    justify-content: space-between;
    padding: 0.75rem;
  }

.upgrade a {
  color: rgb(255, 255, 255);
  font-size: 0.75rem;
  font-weight: 600;
}

  .upgrade a:hover {
    color: rgb(145, 153, 158);
  }

  .upgrade a.button {
    background-color: transparent;
    border: 2px solid rgb(255, 255, 255);
    font-size: 0.875rem;
    font-weight: 800;
    padding: 0.375rem 1rem;
  }

    .upgrade a:hover.button {
      background-color: rgb(255, 255, 255);
      color: rgb(246, 151, 21);
    }


a.transparent-upgrade {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hover-icon {
  cursor: pointer;
  font-weight: 700;
  display: inline-block;
  position: relative
}

  .hover-icon > .hover-info {
    background-color: rgb(25, 36, 42);
    border-radius: 3px;
    box-sizing: border-box;
    bottom: 125%;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-size: 0.75rem;
    left: 50%;
    line-height: 1rem;
    margin-left: -8rem;
    padding: 0.5rem;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 16rem;
    z-index: 10;
  }

    .hover-icon > .hover-info::after {
      background-color: rgb(25, 36, 42);
      border-radius: 3px;
      content: "";
      height: 1.25rem;
      left: 50%;
      margin-left: -0.625rem;
      position: absolute;
      top: 75%;
      transform: rotate(45deg);
      width: 1.25rem;
      z-index: -1;
    }

  .hover-icon:hover > .hover-info {
    visibility: visible;
  }

.copy-notice {
  background-color: rgb(25, 36, 42);
  border-radius: 3px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline-block;
  font-size: 0.75rem;
  left: 50%;
  line-height: 1rem;
  margin: -2.5rem 0 0 -2rem;
  opacity: 0;
  padding: 0.5rem;
  position: absolute;
  text-align: center;
  top: 0%;
  width: 5rem;
  z-index: 10;
}

  .copy-notice::after {
    background-color: rgb(25, 36, 42);
    border-radius: 3px;
    content: "";
    height: 1.25rem;
    left: 50%;
    margin-left: -0.625rem;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 1.25rem;
    z-index: -1;
  }

.lightbox-container {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
}

  .lightbox-container.hide {
    display: none !important;
  }

.lightbox {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.33);
  overflow-y: auto;
  padding: 1rem;
  position: relative;
  margin: auto;
  max-height: 100%;
  max-width: 400px;
  width: 100%;
  z-index: 10;
}

  .lightbox.small {
    max-width: 400px;
  }

  .lightbox.medium {
    max-width: 700px;
  }

  .lightbox.full {
    max-width: 100%;
    height: 100%;
  }

  .lightbox .lightbox-header {
    color: rgb(66, 81, 90);
    font-size: 1.25rem;
    font-weight: 600;
  }

  .lightbox a {
    color: rgb(41, 187, 179);
    display: inline-block;
    line-height: 1rem;
    padding-top: 0.625rem;
    text-decoration: none;
  }

    .lightbox a::after {
      background-color: rgb(41, 187, 179);
      bottom: 0.625rem;
      content: '';
      display: inline-block;
      height: 1px;
      left: 0;
      line-height: 1px;
      margin: 0;
      position: relative;
      right: 0;
      width: 100%;
    }

    .lightbox a.text-button::after {
      bottom: 0.625rem;
    }

    .lightbox .form-buttons {
      align-items: center;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }

  .lightbox h2 {
    font-size: 1.25rem;
    margin: 0 0 1rem 0;
  }

  .lightbox .close {
    cursor: pointer;
    height: 1rem;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    width: 1rem;
  }

  .lightbox .workspace-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

    .lightbox .workspace-list li {
      margin: 0.25rem 0;
      padding: 0;
    }

    .lightbox .workspace-list a {
      align-items: center;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      font-size: 1rem;
      font-weight: 600;
      justify-content: flex-start;
      padding: 0.5rem;
    }

    .lightbox .workspace-list a::after {
      display: none;
    }

      .lightbox .workspace-list img {
        margin-right: 1rem;
      }

      .lightbox .workspace-list a:hover {
        background-color: rgb(237, 237, 237);
      }

@media screen and (min-width: 50rem) {
  .lightbox {
    padding: 2.25rem;
  }
}