@import "reset.css";
@import "balloon.min.css";

* {box-sizing: border-box;}

:root {
  --color-default: #2d3337;
  --color-brand: #F53B57;
  --color-brand-hover: #df3e56;
  --color-brand-light: #fff4EC;
  --color-grey: #777;
  --color-mid-grey: #bababa;
  --color-light-grey: #EBEBEB;
  --color-light-grey-hover: #f8f8f8;
  --color-white: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-default: #ccc;
    --color-brand: #b5283d;
    --color-brand-light: #272727;
    --color-grey: #919191;
    --color-mid-grey: #747474;
    --color-light-grey: #333;
    --color-light-grey-hover: #444;
    --color-white: #111;
  }
}

body {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  background-color: var(--color-white);
  padding: 0 1rem;
}

@media (max-width: 600px) {
  body {
    font-size: 15px; /* Smaller base size */
  }
}

a {color: var(--color-default);}
a:hover{color: var(--color-default) !important;transition:color 0.3s}
.nolink {text-decoration: none;}

img { width: 100%; border-radius: 3px }

hr { margin: 2rem 0; border: none; border-top: 1px solid var(--color-light-grey); }

/* Helper classes */
.tc { text-align: center; }
.tr { text-align: right; }
.tl { text-align: left; }
h1, .fs1 { font-size: 2em; }
h2, .fs2 { font-size: 1.6em; }
h3, .fs3 { font-size: 1.2em; }
.fssmall { font-size: 0.875em; }
.color--grey, .color--grey a:link, .color--grey a:visited { color: var(--color-grey) }
.color--brand { color: var(--color-brand) }
strong, .b { font-weight: bold; }
.tdn {text-decoration: none}
.normal { font-weight: normal; }
.ttu { text-transform: uppercase; }
.mb0 {margin-bottom: 0}
.mb1 {margin-bottom: 1rem}
.mb2 {margin-bottom: 2rem}
.mt0 {margin-top: 0}
.mt2 {margin-top: 2rem !important}
.mt4 {margin-top: 4rem}
.mt3 {margin-top: 3rem}
.dn { display: none }
.inline-svg { position: relative; top:2px; }
.relative { position: relative; }

.list {
  list-style: auto;
  margin-left: 1.2rem;
}


.table-wrap {
  overflow-x: auto;
  width: 100%;
}
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table th {
  font-weight: bold;
  color: var(--grey);
  padding: 0 0.25rem 0.5rem;
}
.table td {
  vertical-align: middle;
  padding: 0.5rem 0.25rem;
  border-top: 1px solid var(--color-light-grey);
}
.table tr:hover td {
  background-color: var(--color-light-grey-hover);
}


/* Type */
.font--brand { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; }
.font--monospace {font-family: monospace; font-size: 0.88em;}
.font-system { font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
h1, h2 { font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; margin-bottom: 1rem }
h3, h4 { font-weight: bold; margin-bottom: 1rem }
em, i { font-style: italic; }
b { font-weight: bold; }
p { margin-bottom: 1.3rem; }
ol, ul { margin-bottom: 1.3rem; }
mark { background-color: var(--color-light-grey); border-radius: 3px; padding: 1px 4px; }

/* Code */
pre { margin: 1rem 0; padding: 0.5rem 1rem; border-radius: 3px; background-color: var(--color-brand-light); font-family: monospace; font-size: 0.88em; overflow: auto; }
code { padding: 2px 4px; border-radius: 3px; background-color: var(--color-brand-light); font-family: monospace; font-size: 0.88em; }


/* Forms */

form label,
form input,
form select,
form textarea { display: block; width: 400px; }
form button { display: block;}
@media (max-width: 600px) {
  form input,
  form select,
  form button,
  form textarea { width:100%;max-width: 400px }
}

form.form-blocked input,
form.form-blocked select,
form.form-blocked button,
form.form-blocked textarea { display: block; width: 100%;max-width: none }

.field-wrap {margin: 1rem 0; }
.field-wrap input,
.field-wrap select, 
.field-wrap textarea { margin: 0.2rem 0; }

label { font-weight: bold; display: block; }
button, input, textarea, select { font: inherit; appearance: none; -webkit-appearance: none; -moz-appearance: none; }

input, select, textarea { padding: 0.5rem; border: 1px solid var(--color-mid-grey); border-radius: 4px;background: transparent;color: inherit}
input:focus, select:focus { outline: none; border-color: var(--color-brand); transition:border-color 0.3s }
button, .button { 
  display: inline-block;
  padding: 0.5rem 1rem; 
  font: inherit; 
  cursor: pointer; 
  border: 1px solid var(--color-brand); 
  border-radius: 2rem; 
  background-color: var(--color-brand); 
  color: #fff; 
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.15em;
  text-decoration: none;
  text-align: center;
}
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.5;
}
button[disabled], .button[disabled] {
  background-color: var(--color-grey);
  border-color: var(--color-grey);
  cursor: default;
}
button:not([disabled]):hover, .button:not([disabled]):hover { background-color: var(--color-brand-hover);border-color: var(--color-brand-hover);color: #fff !important;transition:background-color 0.3s; }
button[disabled]:hover, .button[disabled]:hover { color: #fff !important; }

@media (prefers-color-scheme: dark) {

}

#id_discord_notifications,
#id_slack_notifications,
#id_discord_member_notifications,
#id_slack_member_notifications {
  margin-right: 4px;
  display: inline-block;
}
.js-test-integration:focus {
  outline: none;
}

/* Filters and lists */
.list-controls{margin-bottom: 1rem}

.filter {border-radius: 3px; display: inline-block;padding: 2px 6px; border: 1px solid var(--color-light-grey); text-decoration: none; }
.filter--active {color: var(--color-default) !important;background-color: var(--color-light-grey);}
.filter:not(.filter--active):hover{transition: border 0.3s;border-color: var(--color-default)}
.filter--active svg g, .filter:not(.filter--active):hover svg g { stroke: var(--color-default); }

.pagination {margin-bottom: 0.5rem;}
@media (min-width: 601px) {
  .list-controls{display: flex;}
  .filter-block {width: 62%;text-align: right;}
  .pagination{width: 38%}
}


/* Sections */
footer {margin-top: 5rem;}

.container {
  max-width: 720px;
  margin: auto;
  padding: 0;
}
.container--wide {
  max-width: 932px;
}
.centre-block {
  max-width: 400px;
  margin: auto;
}

/* Menus */
header.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--color-white);
  padding: 1rem !important;
  position: sticky;
  top: 0;
  z-index: 10000;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
  margin: 0 -1rem 2rem -1rem !important;
  max-width: calc(100% + 2rem);
}
.menu-left{width: 100%;padding-top: 0.2rem}
.menu-centre{width: 70%;margin-top: 0.5rem}
.menu-right{width: 30%;margin-top: 0.5rem}
@media (min-width: 785px) {
  .menu-left{width: 25%;}
  .menu-centre{width: 50%;margin-top: 0;text-align: center;}
  .menu-right{width: 25%;margin-top: 0}
}
a.nav-item, .faux-nav-item {display: inline-block; padding: 0.4rem 0.2rem;text-decoration:none;border-radius: 5px;margin-right: 0.5rem;}
a.nav-item:hover {color: var(--color-default);}
a.nav-item--active {color:var(--color-default) !important; font-weight: bold}
@media (min-width: 785px) {
  a.nav-item, .faux-nav-item {padding: 0.4rem 0.6rem;margin: 0}
  a.nav-item:hover {background-color: var(--color-light-grey-hover);}
}
.nav-item.account-link {white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 180px;}
.subnav {margin-bottom: 2rem;position: relative; overflow: scroll; white-space: nowrap;}
a.subnav-item {display:inline-block;padding: 0.5rem 0.5rem;margin: 0 0.5rem 0.5rem 0; border-radius: 5px;}
a.subnav-item--active{border: none; background-color: var(--color-light-grey);}
a.subnav-item {display: inline-block; text-decoration:none;border-bottom: 1px solid transparent;position: relative;top:1px}
a.subnav-item:not(.subnav-item--active):hover {color: var(--color-default); background-color: var(--color-light-grey-hover);}

.subnav-item svg { vertical-align: text-bottom;display: inline-block;transform: translateY(-1px) }

@media (min-width:  731px) {
  .flex {
    display: flex;
    justify-content: space-between;
    max-width: calc(720px + 2rem + 180px);
  }
  .subnav {
    flex: 0 0 180px;
    margin-right: 2rem;
    white-space: normal;
    border-bottom: none;
  }
  .content {
    flex: 0 1 720px;
    overflow: hidden;
  }

  a.subnav-item {
    display: block;
  }
}

@media (max-width: 411px) {
  a.trial-notice {display: none}
}

.banner {
  width: calc(100% + 2rem);
  background: var(--color-brand-light);
  text-align: center;
  padding: 0.5rem;
  margin: -1rem -1rem 1rem -1rem
}


/* Comments pages */
.comment {padding: 0 0;margin: 2rem 0;}
.comment .comment {padding-bottom: 0}
.comment--reply { margin-left: 48px; }
.comment-header {margin-bottom: 1rem;}
.comment-body{margin:0.5em 0;border-radius: 3px; background-color: var(--color-brand-light);padding: 1rem}
.comment-body--hidden{background-color: var(--color-light-grey);color:#777;}
.comment-body p:last-of-type,
.comment-body ul:last-of-type,
.comment-body ol:last-of-type {margin-bottom: 0}
.comment-user{display:flex}
.comment-meta{line-height:1.4;}
img.avatar{margin:0 0.5em 0 0;border-radius:50%;width:40px;height:40px;max-width:40px;vertical-align: top}
img.avatar--medium{margin: 0;width: 32px;height:32px;}
img.avatar--mini{margin: 0;width: 20px;height:20px;}
.comment-date,.comment-tools{color:#aaa;font-size:0.85em;}
.comment h1, .comment h2, .comment h3, .comment h4 { font-family: inherit; }


/* Members */
.members {display: flex;justify-content: space-between; flex-wrap: wrap;}
.member {position: relative; font-size: 1em; width: 100%; margin-bottom: 1rem; padding: 1rem; border-radius: 3px; border: 1px solid var(--color-light-grey); }
@media (min-width: 601px) {
  .member {width: 48%}
}
.member-user {display: flex;margin-bottom: 0.5rem}

.member--inactive {
  opacity: 0.5;
}
.member .delete { display: none; position: absolute; right: 1rem; bottom: 1rem; }
.member:hover .delete { display: block; }

#member-search {position: relative;top: -.5rem; width: 240px;max-width: 100%}

textarea.inline-edit { display: inline-block; padding: 0; border: 0; box-shadow: none; background-color: var(--color-light-grey); font-weight: bold}


/* Messages */
.messages li {padding: 0.5rem;display: inline-block;border-radius: 5px;}
.messages li.success {color: green; background-color: #dbf8db;}
.messages li.success::before {content: '✓ ';font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.messages li.error {color: red;background-color: #fde1e1;}
.messages li.warning {background-color: var(--color-light-grey)}
.messages li.warning::before, .alert-icon {color: red;content: '⚠ ';font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

@media (prefers-color-scheme: dark) {
  .messages li.success {color: #dbf8db; background-color: #1f4c1f;}
  .messages li.error {color: #fde1e1;background-color: #8b3131;}
  .messages li.warning::before {color: #fff}
}


/* Plans */
.plan { 
  margin: 0 auto 2rem;
  padding: 1.5rem 1.5rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--color-light-grey);
  max-width: 300px;
  transition: box-shadow 0.2s;
}
.plan--highlight {border-color: var(--color-brand)}
@media (min-width: 701px) {
  .plans {display: flex; justify-content: space-between;}
  .plan {
    width: 31%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.plan .button { width: 100%; }

.plan-list {
  list-style: none;
  padding-left: 0;
}
.plan-list li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}
.plan-list li:before {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  text-align: center;
  content: '✓';
  color: var(--color-brand);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size: 0.875rem;
}
.plan-list li.notick:before {
  content: '•';
  color: #777;
}
.plan-list li.nope:before {
    content: '✗';
    color: #777;
}

.team, .monthly { display: none; }


input + .slider {
  background: var(--color-grey) !important;
}
[data-plan-toggle] {
  width: 90px;
  text-align: center;
}
[data-plan-toggle="yearly"] {
  width: 70px;
}


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

.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

/* Hide default HTML checkbox */
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-light-grey);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--color-green);
}

input:focus + .slider {
  box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

input[type=checkbox] {
  height: 1.25rem;
  width: 1.25rem;
  appearance: auto !important;
  transform: translateY(4px)
}
label { cursor: pointer; user-select: none;}

.tag {
  display: inline-block;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--color-brand);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: bold;
  cursor: default;
}

.tag--grey {
  background-color: var(--color-mid-grey);
}



/* Tools */

.top-topic {
  display: flex;
  column-gap: 1rem;
}
.top-topic > div:first-of-type {
  flex: 0 1 4rem;
  text-align: center;
}
.top-topic > div:last-of-type {
  flex: 1 1;
}


.js-copy-code {
  display: none;
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 4px 8px;
  font-size: 14px;
  background: var(--color-grey);
  color: var(--color-white);
  border-radius: 3px;
  cursor: pointer;
}

div:hover > .js-copy-code {
  display: initial;
}


/* Editor */
button.ck-button {
  border: none;
  transition: none !important;
}
button.ck-button:hover {
  color: initial !important;
  border: none;
  transition: none;
}

.email-example {
  border: 1px solid var(--color-light-grey);
  padding: 1rem;
}

.email-example ol, .email-example ul,
.ck-editor .ck-content ol,
.ck-editor .ck-content ul { margin-left: 1.3rem;list-style: initial;}
.email-example ol, .ck-editor .ck-content ol { list-style: decimal; }
.ck-editor .ck-content blockquote {
  margin-bottom: 1.3rem;
  padding-left: 1rem;
}
.ck-editor blockquote *:last-child {
  margin-bottom: 0;
}


[aria-label][data-balloon-pos] {
  cursor: default;
}
a[aria-label][data-balloon-pos] {
  cursor: pointer;
}
[aria-label][data-balloon-pos]:after {
  text-transform: initial;
}