.flash {
  text-align:center;
  padding:17px 0;
  font-size:14px;
  box-shadow: var(--box-shadow-combined);
  font-family: "Matter SemiMono", -apple-system, system-ui;
}

.flash.alert {
  color:white;
  background-color:var(--alert-red);
}

.flash.notice {
  color:#fff;
  background-color:var(--forest);
}

.toast_flash {
  border-radius:8px;
  margin-bottom:20px;
}

button.mobile_hamburger {
  margin-bottom:0;
  padding:0;
  border:0;
  position:absolute;
  top:20px;
  right:20px;
  display:block;
}

@media (min-width:800px) {
  button.mobile_hamburger {
    display:none;
  }
}

.navbar {
  padding:12px 0;
}

@media (min-width:900px) {
  .navbar {
    padding:20px 0 ;
  }
}

.navbar_inner {
  display:flex;
  justify-content: space-between;
  align-items:center;
}

.navbar_inner .links {
  display:flex;
  align-items:center;
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
  gap:16px;
}

.navbar_inner .links .action_button {
  color:#24292E;
}

.navbar_inner a {
  text-decoration:none;
  color:var(--hard-grey);
}

.logomark {
  width:53px;
  height:auto;
}

.wordmark {
  width:156px;
  height:auto;
}

.action_button, input.action_button {
  text-decoration:none;
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  align-items:center;
  display:inline-block;
  font-family: "Matter SemiMono", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  list-style: none;
  padding: 6px 16px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
  letter-spacing:-0.4px;
  margin-bottom:0;
}

.action_button.small {
  font-size:12px;
  padding:4px 12px;
}

.action_button:hover, input.action_button:hover {
  background-color: #F3F4F6;
  color: #24292E;
  text-decoration: none;
  transition-duration: 0.1s;
  border: 1px solid rgba(27, 31, 35, 0.15);
}

.action_button:active, input.action_button:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

.action_button:focus {
  border-color:rgba(27, 31, 35, 0.15);
}

.action_button:before, input.action_button:before {
  display: none;
}

.action_button:-webkit-details-marker, input.action_button:-webkit-details-marker {
  display: none;
}

.form_button {
  margin-top:10px;
  margin-bottom:0;
}

.form_heading {
  border-bottom:1px solid var(--gridline);
  padding:32px;
}

.form_heading h1 {
  margin-bottom:0;
  text-wrap:pretty;
}

.form {
  padding:16px;
}

.form p.form_intro {
  margin-bottom:2px;
}

.form p.form_intro:last-of-type {
  margin-bottom:20px;
}

.form .alert {
  border:1px solid var(--alert-red);
  margin-bottom:10px;
  font-family: "Matter SemiMono", monospace;
  text-align: center;
  color:var(--alert-red);
  padding:10px;
  border-radius:7px;
  font-size:15px;
  box-shadow:var(--box-shadow-combined);
}

.form .field {
  margin-bottom:4px;
}

@media (min-width:900px) {
  .form .field {
    margin-bottom:20px;
  }
}

.form .field:last-of-type, .form .field.last {
  margin-bottom:10px;
}

.form .alert:last-of-type {
  margin-bottom:27px;
}

@media (min-width: 900px) {
  .form {
    padding:32px;
  }
}

a.forgot_password {
  margin-top:10px;
  font-size:13px;
  text-decoration:none;
  position: relative;
  float:right;
  font-family: "Matter SemiMono", -apple-system, system-ui;
  color:var(--soft-grey);
}

.form_actions {
  display:flex;
  justify-content: space-between;
  align-items:center;
}

#project_nav {
  display:flex;
  flex-direction: column;
  position:relative;
  overflow:hidden;
  font-family:"Matter SemiMono", -apple-system, system-ui;
}

#project_nav a {
  text-decoration:none;
  padding:6px 8px;
  display:flex;
  align-items:center;
  white-space: nowrap;
  overflow:hidden;
  transition: background-color 0.6s ease, transform 0.6s ease, color 0.6s ease;
  color:#89837a;
  border-radius:6px;
}

#project_nav a:hover {
  transition: background-color 0.1s ease, transform 0.1s ease, color 0.1s ease;
  background-color:#f6ede0;
}

#project_nav a.active {
  background-color:var(--dark-peach);
  color:var(--hard-grey);
}

#project_nav a .icon {
  height:auto;
  width:19px;
  margin-right:16px;
  stroke: #847d7d;
}

#project_nav a.active .icon {
  stroke: #66615f;
}

#project_nav .project_nav_inner {
  margin-top:50px;
  position:fixed;
  border-right:1px solid #333;
  height:100dvh;
}

.sidebar {
  width: 0px;
  background-color: var(--peach);
  border-right:1px solid var(--dark-peach);
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y:auto;
  overflow-x: hidden;
  transition: width 350ms;
  z-index:20;
}

.sidebar.mobile_open {
  width:75%;
}

.sidebar.mobile_open .top, .sidebar.mobile_open .bottom {
    opacity:1;
  }

.sidebar .top, .sidebar .bottom {
  opacity: 0;
  transition: opacity 250ms;
}

.sidebar ul, .sidebar li {
  list-style-type:none;
  font-size:14px;
}

.sidebar ul {
  margin:12px;
}

.sidebar li {
  margin-bottom:6px;
}

.sidebar img.add_project_icon {
  width:19px;
  height:auto;
  margin-right:5px;
}

.sidebar .sidebar_header {
  height:120px;
  border-bottom:1px solid var(--dark-peach);
  display:flex;
  justify-content: center;
  align-items:center;
}

.sidebar_footer_links {
  margin-bottom:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sidebar_footer_links button:hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.sidebar_footer_links button {
  width:88%;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  display:block;
  opacity:0.6;
  transition: opacity 0.6s ease;
}

.sidebar_footer_links button, .sidebar_footer_links button:hover {
  background-color:var(--peach);
  color: #89837a;
}

.sidebar .add_project_button {
  justify-content: center;
  background-color:var(--peach);
}

.wrapper, .shared_wrapper {
  margin-left: 0px;
  flex: 1;
  transition: margin 350ms;
}

.main {
  max-width:1020px;
  padding:52px 20px;
  margin-left:auto;
  margin-right:auto;
  transition: padding 350ms;
}

@media (min-width: 800px) {
  .wrapper {
    margin-left:200px;
  }
  .sidebar {
    width: 200px;
  }
  .sidebar .top, .sidebar .bottom {
    opacity:1;
  }
  .shared_wrapper {
    margin-left:0;
  }
}

@media (min-width:900px) {
  .main {
    padding: 52px;
  }
}

@media (min-width: 1300px) {
  .sidebar {
    width:212px;
  }
  .wrapper {
    margin-left: 212px;
  }
  .shared_wrapper {
    margin-left:0;
  }
}

.box {
  background-color:#fff;
  border-radius:6px;
  border:1px solid var(--gridline);
  padding:20px;
  margin-bottom:20px;
}

.box h1 {
  font-size:36px;
}

.paper_wrapper {
  background-color:#fff;
}

.paper {
  background-color: var(--paper);
  box-shadow: var(--box-shadow-combined);
  border-radius:8px;
  border:1px solid var(--gridline);
  z-index:10;
  position: relative;
  overflow:hidden;
  margin-bottom:40px;
}

.breadcrumbs_wrapper {
  background-color:var(--paper);
  border:1px solid var(--gridline);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  width:95%;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  transform: translateY(6px);
  z-index:1;
  transition: transform 400ms ease-in-out;
}

.breadcrumbs_wrapper:hover {
  transform: translateY(5px);
  transition: transform 100ms ease-in-out;
}

.breadcrumbs {
  font-family:"Matter SemiMono", -apple-system, system-ui;
  padding-bottom:12px;
  padding-left:20px;
  padding-right:20px;
  padding-top:14px;
  font-size:13px;
  color:#7b7878;
}

.breadcrumbs a {
  text-decoration:none;
  color:#7b7878;
}

.paper div.heading {
  padding:32px;
}

.paper .hero {
  padding: 42px 32px;
  border-bottom:1px solid var(--gridline);
}

.paper .hero.with_tabs {
  padding-bottom:0;
}

.tabs {
  padding-top:38px;
  font-family: "Matter SemiMono", monospace;
  font-size:13px;
  display:flex;
  overflow-x:scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (min-width:900px) {
  .tabs {
    font-size:15px;
  }
}

.tabs a {
  text-decoration:none;
  color:var(--soft-grey);
  padding:7px 12px;
  padding-top:0;
  flex:1;
  max-width:135px;
  text-align:center;
  border-bottom:2px solid transparent;
}

.tabs a.selected {
  color:var(--deep-rose);
  border-bottom:2px solid var(--deep-rose);
}

.paper .action_bar {
  padding:16px 32px;
  background-color:var(--gentle-white);
  border-bottom:1px solid var(--gridline);
  display:flex;
  justify-content: space-between;
  gap:8px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.paper .action_bar::-webkit-scrollbar {
  display:none;
}

.paper .action_bar .left {
  display:flex;
  gap:8px;
}

.paper .content {
  padding:20px;
}

a.settings_link {
  position:absolute;
  top:18px;
  right:18px;
}

img.settings_icon {
  width:19px;
  height:auto;
}

.login_form {
  max-width:700px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  padding:16px;
  border:1px solid var(--gridline);
  border-radius:12px;
  background-color:var(--paper);
  box-shadow:var(--box-shadow-combined);
}

@media (min-width:900px) {
  .login_form {
    padding:32px;
  }
}

h1.login_header {
  max-width:700px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:16px;
}

.news_feeds_wrapper {
  padding:20px;
}

table.news_feeds {
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
}

.footer {
  padding:30px 0;
  font-family:"Matter SemiMono", monospace;
  color:var(--soft-grey);
  font-size:13px;
}

.footer_cols {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gridline);
}

.footer_col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer_col_heading {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--soft-black);
  cursor: pointer;
  padding: 12px 0;
  border-bottom: 1px solid var(--gridline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.footer_col_heading::after {
  content: "+";
  font-size: 18px;
  font-weight: 300;
}

.footer_col_heading[aria-expanded="true"]::after {
  content: "−";
}

.footer_col_links {
  font-size:14px;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

.footer_col_links.open {
  display: flex;
}

.footer_col_links a {
  color: var(--soft-grey);
  text-decoration: none;
}

.footer_col_links a:hover {
  color: var(--soft-black);
}

.footer_bottom {
  padding-top: 16px;
}

@media (min-width: 900px) {
  .footer_cols {
    flex-direction: row;
    gap: 48px;
  }

  .footer_col {
    gap: 10px;
    min-width: 120px;
  }

  .footer_col_heading {
    cursor: default;
    padding: 0;
    border-bottom: none;
    display: block;
    margin-bottom: 4px;
  }

  .footer_col_heading::after {
    content: none;
  }

  .footer_col_links {
    display: flex;
    padding: 0;
  }
}

.demo_banner, .subscription_ended_banner {
  font-family: "Inter";
  background-color:var(--peach);
  border:1px solid var(--gridline);
  border-radius:8px;
  padding:20px;
  margin-bottom:40px;
  box-shadow:var(--box-shadow-combined);
}

.subscription_ended_banner {
  background-color:var(--alert-red);
  color:var(--paper);
}

svg.subscription_ended_alert_icon {
  width:22px;
  height:auto;
  stroke:var(--paper);
}

.demo_banner p.heading, .subscription_ended_banner p.heading {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight:700;
  margin-bottom:8px;
  text-wrap:pretty;
}

.subscription_ended_banner p.heading {
  display:flex;
  align-items: center;
  gap:4px;
  font-size:18px;
}

.subscription_ended_banner a {
  color:var(--paper);
}

.demo_banner p.message, .subscription_ended_banner p.message {
  font-size:15px;
  display:flex;
  flex-direction: column;
  gap:6px;
  margin-bottom:10px;
}

.subscription_ended_banner p.message {
  font-size:16px;
}

@media (min-width:900px) {
  .demo_banner p.message, .subscription_ended_banner p.message {
    align-items:center;
    flex-direction: row;
  }
}

.demo_banner a {
  text-decoration:none;
}

.demo_banner p, .subscription_ended_banner p {
  margin-bottom:0;
  text-wrap:pretty;
}

.demo_banner a.action_button {
  background-color:transparent;
}

.slack_banner {
  font-family: "Inter";
  font-size:16px;
  background-color:var(--paper);
  border:1px solid var(--gridline);
  border-radius:8px;
  padding:16px 20px;
  margin-bottom:40px;
  box-shadow:var(--box-shadow-combined);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

img.slack_icon {
  width:24px;
  height:auto;
  margin-right:8px;
}

.slack_banner_content {
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
}

.slack_banner_content a {
  text-decoration:none;
  color:var(--soft-black);
  display:flex;
  align-items:center;
  gap:3px;
}

span.bold_label {
  font-weight:700;
}

.slack_banner_dismiss {
  background:none;
  border:none;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  color:var(--soft-grey);
  padding:0 4px;
  flex-shrink:0;
  margin-bottom:0;
}

.slack_banner_dismiss:hover {
  color:var(--text);
}

.demo_banner a.action_button.active {
  background-color:#fff;
}

.demo_project_nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--gridline);
  align-items:center;
}

.demo_project_nav span {
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
}

.demo_project_link {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size:14px;
  font-weight:500;
  padding:6px 14px;
  border-radius:6px;
  border:1px solid #e8b4b4;
  color:var(--hard-grey);
  text-decoration:none;
  transition:background-color 0.15s;
}

.demo_project_link:hover {
  background-color:rgba(0,0,0,0.05);
}

.demo_project_link.active {
  background-color:rgba(0,0,0,0.08);
  font-weight:600;
}

.unsubscribe_box {
  text-align:center;
  background-color:var(--paper);
  border:1px solid var(--gridline);
  border-radius:8px;
  padding:24px;
}

.unsubscribe_box h1 {
  font-size:30px;
  margin-bottom:10px;
  text-wrap:balance;
}

.unsubscribe_box button {
  margin-bottom:14px;
}

button.dropdown {
  border:0;
  padding:0;
  color: var(--hard-grey);
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
  font-weight:400;
  margin-bottom:0;
  line-height:1.4;
  display:flex;
  gap:3px;
  align-items:center;
}

button.dropdown svg.chevron {
  width:13px;
  height:auto;
}

.dropdown_menu {
  position:absolute;
  z-index:10;
  display:flex;
  flex-direction: column;
  background-color:#fff;
  border-radius:8px;
  border:1px solid var(--gridline);
  box-shadow:var(--box-shadow-combined);
  margin-top:9px;
  min-width:172px;
  font-family:"Matter SemiMono", monospace;
  right:-45px;
}

.forward_button_wrapper .dropdown_menu {
  right:-59px;
}

.add_to_calendar_wrapper .dropdown_menu {
  right:0px;
  min-width:161px;
}

.dropdown_menu a {
  padding:10px 11px;
  font-size:13px;
  text-decoration:none;
  color:var(--soft-grey);
}

.dropdown_menu a:nth-child(even) {
  background-color:var(--gentle-grey);
}

.dropdown_menu a:last-of-type {
  border-radius:0 0 6px 6px;
}
/* Dropdown animated menu */
[data-dropdown-target="menu"] {
  opacity: 0;
  transform: translateY(-4px) translateX(0px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}

[data-dropdown-target="menu"].is-open {
  opacity: 1;
  transform: translateY(0) translateX(0px) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
}


.checkbox_wrapper {
  display:flex;
  align-items:center;
  gap:6px;
}

.checkbox_wrapper input, .checkbox_wrapper label {
  margin-bottom:0;
}

.checkbox_wrapper label {
  font-family: "Matter SemiMono", monospace;
  font-weight:400;
  font-size:14px;
}

.extended_trial_wrapper {
  background-color:var(--forest);
  color:#fff;
  padding:20px 0;
  text-align:center;
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
  text-wrap:balance;
}

.hidden {
  display:none;
}

span.underlined {
  text-decoration: underline;
}

.alert_rules_table {
  overflow-x:auto;
}

.action_button.big_primary_button {
  padding:11px 30px;
  font-size:15px;
  background-color:var(--forest);
  color:var(--paper);
  box-shadow:rgba(27, 31, 35, 0.04) 0 1px 0, rgb(255 255 255 / 33%) 0 1px 0 inset;
  display:flex;
  align-items:center;
  gap:6px;
}

.action_button.big_primary_button[disabled] {
  opacity: 1;
  justify-content: center;
}

.action_button.big_primary_button:hover, .action_button.big_primary_button:active, .action_button.big_primary_button:focus {
  background-color:#0e795f;
  color:var(--paper);
}

.negative_margin {
  margin-bottom:-6px;
}

.buttons_row {
  display:flex;
  align-items: end;
  justify-content: space-between;
}

img.loading_state {
  width:26px;
  height:20px;
}

.invited_form {
  margin-top:5dvh;
}

.invited_form h1 {
  text-align:center;
  margin-bottom:30px;
}

.rounded_button {
  background-color:var(--paper);
  color:var(--soft-grey);
  border:1px solid var(--gridline);
  text-decoration:none;
  font-family: "Inter", sans-serif;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:8px 11px;
  border-radius:20px;
  transition:transform 400ms;
}

.rounded_button:hover {
  color:var(--soft-grey);
}

.rounded_button:active {
  transform:scale(0.98);
  transition: transform 100ms;
}

.big_see_more_button {
  font-family:"Inter", sans-serif;
  background-color:var(--paper);
  color:var(--forest);
  border:1px solid var(--forest);
  text-decoration:none;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:20px;
  border-radius:40px;
  transition: transform 500ms;
}

.big_see_more_button:hover {
  color:var(--forest);
  transform: scale(1.01);
  transition: transform 250ms;
}

.big_see_more_button:active {
  transform: scale(0.99);
  transition: transform 100ms;
}

.upper_block_link {
  text-decoration: none;
}

.upper_block_link .rounded_button {
  text-decoration:none;
}

a.back_button {
  font-family: "Inter", sans-serif;
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:1px;
  text-decoration:none;
  color:var(--soft-grey);
  border:1px solid var(--gridline);
  border-radius:25px;
  padding:4px 8px;
  position:absolute;
  top:14px;
  left:14px;
  background-color:var(--gentle-grey);
  transition: transform 600ms;
}

a.back_button svg {
  width:14px;
  height:auto;
}

a.back_button:active {
  transform:scale(0.98);
  transition: transform 100ms;
}

@media (min-width:900px) {
  a.back_button {
    font-size:14px;
    padding:6px 10px;
    top:22px;
    left:22px;
  }
  a.back_button svg {
    width:19px;
    height:auto;
  }
}

.with_extra_padding h1 {
  padding:34px 0;
  padding-bottom:10px;
}

.hero_link {
  text-decoration:none;
  color:var(--soft-black);
}

.hero_link:hover {
  color:var(--soft-black);
}