:root, #coral {
  /* Non-Coral Custom Font Families */
  --font-family-primary-bold: "font-graphik-semibold", "benton-sans-bold", sans-serif;

  /* Font families */
  --font-family-primary: "font-graphik-regular", "benton-sans-regular", "Helvetica", "Arial", sans-serif;
  --font-family-secondary: "benton-sans-regular", sans-serif;

  /* Font sizes */
  --font-size-1: 0.75rem; /* 12px */
  --font-size-2: 0.875rem; /* 14px */
  --font-size-3: 1rem; /* 16px */
  --font-size-4: 1.125rem; /* 18px */
  --font-size-5: 1.25rem; /* 20px */
  --font-size-6: 1.5rem; /* 24px */
  --font-size-7: 1.75rem; /* 28px */
  --font-size-8: 2rem; /* 32px */
  --font-size-9: 2.25rem; /* 36px */

  /* Font weights */
  --font-weight-primary-bold: 700; /* Bold */
  --font-weight-primary-semi-bold: 600; /* Semi-bold */
  --font-weight-primary-regular: 400; /* Regular */
  --font-weight-secondary-bold: 700; /* Bold */
  --font-weight-secondary-regular: 500; /* Regular */

  /* Colors */
  --palette-primary-100: #E8F5E9; /* light green */
  --palette-primary-200: #C8E6C9; /* lighter green */
  --palette-primary-300: #A5D6A7; /* light medium green */
  --palette-primary-400: #81C784; /* medium green */
  --palette-primary-500: #4CAF50; /* main green */
  --palette-primary-600: #43A047; /* dark green */
  --palette-primary-700: #388E3C; /* darker green */
  --palette-primary-800: #2E7D32; /* even darker green */
  --palette-primary-900: #00824a; /* darkest green */

  --palette-background-body: #FFFFFF;
  --palette-background-popover: #FFFFFF;
  --palette-background-tooltip: #F5F5F5;
  --palette-background-input: #FFFFFF;
  --palette-background-input-disabled: #EFEFEF;

  --palette-text-000: #FFFFFF;
  --palette-text-100: #65696B;
  --palette-text-500: #353F44;
  --palette-text-900: #14171A;
  --palette-text-placeholder: #9FA4A6;
  --palette-text-input-disabled: #9FA4A6;

  --palette-grey-100: #F4F7F7;
  --palette-grey-200: #EAEFF0;
  --palette-grey-300: #E1E1E1;
  --palette-grey-400: #9FA4A6;
  --palette-grey-500: #65696B;
  --palette-grey-600: #49545C;
  --palette-grey-700: #32404D;
  --palette-grey-800: #202E3E;
  --palette-grey-900: #132033;

  --palette-error-100: #FCE5D9;
  --palette-error-200: #FAC6B4;
  --palette-error-300: #F29D8B;
  --palette-error-400: #E5766C;
  --palette-error-500: #D53F3F;
  --palette-error-600: #B72E39;
  --palette-error-700: #991F34;
  --palette-error-800: #7B142E;
  --palette-error-900: #660C2B;

  --palette-success-100: #D8F9D5;
  --palette-success-200: #ADF3AD;
  --palette-success-300: #7CDB85;
  --palette-success-400: #54B767;
  --palette-success-500: #268742;
  --palette-success-600: #1B743D;
  --palette-success-700: #136138;
  --palette-success-800: #0C4E32;
  --palette-success-900: #07402E;

  --palette-warning-100: #FFFACC;
  --palette-warning-500: #FFE91F;
  --palette-warning-900: #FFCC15;

  --palette-text-primary: #0D0D0D;
  --palette-text-secondary: #434343;
  --palette-text-tertiary: #666666;
  --palette-text-reversed: #FFFFFF;
  --palette-text-disabled: #929292;
  --palette-text-color-01: #00854B;

  --palette-border-subtle-01: #E1E1E1;
  --palette-border-subtle-02: #AFAFAF;

  --palette-bg-surface-secondary: #F2F2F2;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 44px;
  --spacing-8: 60px;
  --spacing-9: 84px;

  /* Border radius */
  --round-corners: 0.75rem;

  /* Shadows */
  --shadow-popover: 0px 0px 34px 0px rgba(0, 0, 0, 0.12);
}

#coral {
 margin-bottom: 0.75rem;
}

/* Comment content styles */
.coral-comment-content {
  font-family: var(--font-family-primary) !important;
  font-style: normal;
  font-size: var(--font-size-2);
  line-height: 1.3rem !important;
  color: var(--palette-text-primary) !important;
  word-wrap: break-word;
}

/* Hide viewer box */
.coral-viewerBox {
  display: none;
}

/* Remove divider of the top tab bar */
.coral-tabBar {
  border-bottom: 1px solid var(--palette-border-subtle-01) !important;
}

.coral-tabBar li:only-child {
  display: none;
}

/* Secondary tab bar styles */
.coral-tabBarSecondary {
  border-bottom-color: var(--palette-border-subtle-01);
}

/* Community guidelines box */
.coral-guidelines {
  font-size: var(--font-size-2);
  font-family: var(--font-family-primary) !important;
  border: 1px solid var(--palette-border-subtle-02);
  border-radius: var(--spacing-7);
  background-color: var(--palette-bg-surface-secondary);
  line-height: 1.2rem !important;
}

.coral-guidelines a {
  color: var(--palette-text-primary);
}

.coral-guidelines-content {
  text-align: center;
}

/* Top tab bar buttons */
.coral-tabBar-comments,
.coral-tabBar-myProfile,
.coral-tabBar-configure {
  border-width: 1px;
  /*
  &[aria-pressed=true],
  &[aria-current] {
    color: var(--palette-primary-500) !important;
    background-color: var(--palette-primary-200) !important;
    border-color: var(--palette-primary-400) !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
  }

  &[aria-selected=true] {
    color: var(--palette-primary-500) !important;
    background-color: var(--palette-primary-200) !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
  }*/
}

.coral-tabBar-comments div i,
.coral-tabBar-myProfile div i {
  display: none;
}

/* Removes comment input and sign in button when user is not authenticated */
.coral.coral-unauthenticated {
    > :first-child, > section, #post-comment-form div[class*="PostCommentFormFake-rteContainer-"] {
        display: none;
    }
}

/* Post comment buttons */
.coral-createComment-submit,
.coral-commentReply-submit,
.coral-createComment-signIn,
.coral-createReplyComment-submit,
.coral-editComment-submit {
  font-family: var(--font-family-primary-bold) !important;
  border-color: var(--palette-text-primary) !important;
  background-color: var(--palette-text-primary) !important;
  color: var(--palette-text-reversed) !important;
  font-size: var(--font-size-2) !important;
  border-radius: var(--spacing-6);
  align-items: center;
  height: 2.5rem;
  display: flex;
  width: auto;
  padding: var(--spacing-3) var(--spacing-4) !important;
  text-transform: capitalize !important;
  font-weight: var(--font-weight-primary-semi-bold) !important;
}

.coral-createComment-submit:hover,
.coral-commentReply-submit:hover,
.coral-createComment-signIn:hover,
.coral-createReplyComment-submit:hover,
.coral-editComment-submit:hover {
  background-color: var(--palette-text-secondary) !important;
  color: var(--palette-text-000);
}

/* Cancel buttons */
.coral-createReplyComment-cancel,
.coral-editComment-cancel,
.coral-editComment-close {
  color: var(--palette-text-primary) !important;
  border-color: var(--palette-text-primary) !important;
  background-color: var(--palette-background-body) !important;
  font-size: var(--font-size-2) !important;
  font-family: var(--font-family-primary-bold) !important;
  border-radius: var(--spacing-6);
  align-items: center;
  height: 2.5rem;
  display: flex;
  width: auto;
  padding: var(--spacing-3) var(--spacing-4) !important;
  text-transform: capitalize !important;
  font-weight: var(--font-weight-primary-semi-bold) !important;
}

.coral-createReplyComment-cancel:hover,
.coral-editComment-cancel:hover,
.coral-editComment-close:hover {
  background-color: var(--palette-grey-300) !important;
  text-decoration: none !important;
}

.coral-createReplyComment-cancel:disabled,
.coral-editComment-cancel:disabled,
.coral-editComment-close:disabled {
  pointer-events: none !important;
  opacity: 0.4 !important;
  cursor: default !important;
}

/* Spacing and divider between comments */
.coral-comment {
  padding-bottom: var(--spacing-2);
  padding-top: var(--spacing-3);
}

/* Comment author */
.coral-comment-username span,
.coral-comment-inReplyToUsername {
  font-family: var(--font-family-primary-bold) !important;
  font-size: var(--font-size-3) !important;
  line-height: 1.25rem !important;
  color: var(--palette-text-primary) !important;
}

.coral-comment-username span:hover,
.coral-comment-inReplyToUsername:hover {
  color: var(--palette-grey-500);
}

/* Comment buttons */
.coral-comment-reactButton,
.coral-comment-reactedButton,
.coral-comment-replyButton,
.coral-comment-shareButton,
.coral-comment-reportButton,
.coral-featuredComment-reactButton,
.coral-featuredComment-replies {
  font-weight: var(--font-weight-secondary-regular) !important;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-1) !important;
  letter-spacing: normal !important;
  color: var(--palette-text-secondary) !important;
  padding: var(--spacing-2) var(--spacing-3);
  border: solid 1px var(--palette-border-subtle-01);
  border-radius: var(--spacing-7);
}

.coral-comment-reactButton span,
.coral-comment-reactedButton span,
.coral-comment-replyButton span,
.coral-comment-shareButton span,
.coral-comment-reportButton span,
.coral-featuredComment-reactButton span,
.coral-featuredComment-replies span,
.coral-comment-reactButton i,
.coral-comment-reactedButton i,
.coral-comment-replyButton i,
.coral-comment-shareButton i,
.coral-comment-reportButton i,
.coral-featuredComment-reactButton i,
.coral-featuredComment-replies i {
  color: var(--palette-text-secondary) !important;
}

.coral-featuredComment-replies div {
  color: var(--palette-text-secondary);
}

.coral-comment-replyButton,
.coral-comment-shareButton {
  background-color: transparent !important;
}

/* Report button reported state */
.coral-comment-reportedButton {
  background-color: transparent !important;
}

.coral-comment-reportedButton span,
.coral-comment-reportedButton i {
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--round-corners);
  font-weight: var(--font-weight-primary-regular);
  pointer-events: none;
}

/* Share comment - copy button */
.coral-sharePopover-copyButton {
  color: var(--palette-primary-500) !important;
  background-color: var(--palette-primary-200) !important;
  border-color: var(--palette-primary-400) !important;
}

.coral-sharePopover-copyButton:hover {
  color: var(--palette-primary-500) !important;
  background-color: var(--palette-primary-200) !important;
  border-color: var(--palette-primary-400) !important;
  font-weight: var(--font-weight-primary-regular) !important;
}

/* xx hours ago */
.coral-myComment-timestamp,
.coral-myComment-timestamp span,
.coral-comment-timestamp,
.coral-comment-timestamp span {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-1);
  margin-bottom: 0;
  color: var(--palette-text-tertiary);
  font-weight: var(--font-weight-primary-regular) !important;
  line-height: 1.2rem !important;
}

/* "staff" tag */
.coral-comment-userTag {
  font-size: var(--font-size-1) !important;
  line-height: 1 !important;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--round-corners);
  color: var(--palette-text-000);
  background-color: var(--palette-text-color-01);
}

/* "featured comment" tag */
.coral-comment-commentTag {
  background-color: var(--palette-text-900) !important;
  color: var(--palette-text-000) !important;
  border-radius: var(--round-corners);
  border: 0 !important;
}

.coral-myComment-commentOn {
  color: var(--palette-text-secondary) !important;
}

.coral-myComment-story {
  font-family: var(--font-family-primary-bold) !important;
  color: var(--palette-text-primary) !important;
}

.coral-notifications-label,
.coral-notifications-heading,
.coral-ignoredCommenters,
.coral-ignoredCommenters-heading {
  font-family: var(--font-family-primary) !important;
  color: var(--palette-text-primary) !important;
}

/* Comment content blockquote */
.coral-rte-content blockquote,
.coral-comment-content blockquote,
.coral-myComment-content blockquote {
  background-color: var(--palette-primary-100);
  font-size: var(--font-size-2) !important;
}

/* Load more buttons */
.coral-allComments-loadMoreButton,
.coral-featuredComments-loadMoreButton,
.coral-myComments-loadMoreButton,
.coral-ignoredComments-manageButton {
  font-family: var(--font-family-primary) !important;
  color: var(--palette-text-primary) !important;
  border-color: var(--palette-text-primary) !important;
  background-color: transparent !important;
  text-transform: capitalize !important;
  width: auto !important;
  border-radius: var(--spacing-7) !important;
  font-size: var(--font-size-2) !important;
}

/* Update buttons */
.coral-notifications-updateButton {
  font-family: var(--font-family-primary) !important;
  color: var(--palette-text-reversed) !important;
  background-color: var(--palette-text-primary) !important;
  text-transform: capitalize !important;
  width: auto !important;
  border-radius: var(--spacing-7) !important;
  font-size: var(--font-size-2) !important;
  border-color: transparent !important;
  cursor: pointer !important;
}

.coral-notifications-updateButton:disabled {
  background-color: var(--palette-bg-surface-secondary) !important;
  color: var(--palette-text-disabled) !important;
  cursor: none !important;
}

/* Featured comments */
.coral-featuredComment {
  border-color: var(--palette-primary-100);
  background-color: var(--palette-primary-100);
}

/* Edit button */
.coral-comment-editButton {
  border-color: var(--palette-grey-300) !important;
}

.coral-comment-editButton:hover {
  color: var(--palette-primary-500) !important;
}

/* Reply indent 
.coral-comment .coral-indent-1,
.coral-comment .coral-indent-2,
.coral-comment .coral-indent-3,
.coral-comment .coral-indent-4,
.coral-comment .coral-indent-5,
.coral-comment .coral-indent-6 {
  border-width: 0 0 0 2px;
  border-image: url("https://");
  border-image-slice: 30%;
  border-image-repeat: round;
}
*/

/* Replies aren't nested inside each other so each level needs a greater margin */
.coral-comment .coral-indent-1 {
  margin-left: 20px;
}

.coral-comment .coral-indent-2 {
  margin-left: 40px;
}

.coral-comment .coral-indent-3 {
  margin-left: 60px;
}

.coral-comment .coral-indent-4 {
  margin-left: 80px;
}

.coral-comment .coral-indent-5 {
  margin-left: 100px;
}

.coral-comment .coral-indent-6 {
  margin-left: 120px;
}

@media (min-width: 500px) {
  .coral-comment .coral-indent-1 {
    margin-left: 44px;
  }

  .coral-comment .coral-indent-2 {
    margin-left: 88px;
  }

  .coral-comment .coral-indent-3 {
    margin-left: 132px;
  }

  .coral-comment .coral-indent-4 {
    margin-left: 176px;
  }

  .coral-comment .coral-indent-5 {
    margin-left: 220px;
  }

  .coral-comment .coral-indent-6 {
    margin-left: 264px;
  }
}

/* Replying to: <<user name>> */
.coral-createReplyComment-replyToUsername {
  font-size: var(--font-size-2);
}

.coral-createReplyComment-replyToUsername:hover {
  color: var(--palette-primary-600);
}

/* In reply to <<author>> */
.coral-comment-inReplyToUsername:hover {
  color: var(--palette-grey-600);
}

/* Verify email resend button */
.coral-verifyEmail-resendButton:hover {
  color: var(--palette-grey-600) !important;
}

/* Verify email - message sent */
.coral-verifyEmail-resentMessage {
  background-color: var(--palette-primary-100);
  border-color: var(--palette-primary-100);
}

/* My comment - view conversation */
/* Featured comment - go to conversation button */
.coral-myComment-viewConversationButton,
.coral-myComments-viewConversationButton,
.coral-featuredComment-goToConversationButton {
  font-family: var(--font-family-primary) !important;
  color: var(--palette-text-primary) !important;
}

.coral-myComment-viewConversationButton > span {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-1) !important;
  text-decoration: none !important;
  padding-left: 2px;
}

.coral-myComment-viewConversationButton:hover,
.coral-myComments-viewConversationButton:hover,
.coral-featuredComment-goToConversationButton:hover {
  color: var(--palette-text-primary) !important;
  text-decoration: underline !important;
}

.coral-createComment-message a,
.coral-createComment-message h1,
.coral-createComment-message h2,
.coral-createComment-message h3,
.coral-createComment-message h4,
.coral-createComment-message h5,
.coral-createComment-message h6,
.coral-configureMessageBox-messageBox a,
.coral-configureMessageBox-messageBox h1,
.coral-configureMessageBox-messageBox h2,
.coral-configureMessageBox-messageBox h3,
.coral-configureMessageBox-messageBox h4,
.coral-configureMessageBox-messageBox h5,
.coral-configureMessageBox-messageBox h6 {
  color: inherit;
}

/* Select field */
.coral-selectField {
  border-radius: 1.2rem;
  background: var(--palette-background-body) !important;
  font-weight: var(--font-weight-primary-regular) !important;
  font-size: var(--font-size-2);
  padding: var(--spacing-2) var(--spacing-4);
}
  .coral-selectField-afterWrapper {
    right: var(--spacing-4);
  }

/* Rich text editor container */
.coral-rte-container {
  background: none;
}

/* Rich text editor toolbar */
.coral-rte-toolbar {
  background: var(--palette-background-body);
  border-top: 1px solid var(--palette-grey-400);
}

/* Comment form */
.coral-commentForm {
  border-style: solid;
  border-width: 1px;
  border-color: var(--palette-grey-400);
  border-radius: 8px;
}

.coral-createReplyComment-replyTo {
  background-color: var(--palette-background-body);
}

.coral-createReplyComment-replyTo {
  color: var(--palette-grey-500);
  border-bottom-width: 0;
  border-color: var(--palette-grey-400);
  border-radius: var(--round-corners);
}

/* Create comment message */
.coral-createComment-message,
.coral-configureMessageBox-messageBox {
  background: var(--palette-text-500);
}

/* Select field */
.coral-selectField {
  background: var(--palette-background-body) !important;
  font-weight: var(--font-weight-primary-regular) !important;
}

/* User tag */
.coral-comment-userTag,
.coral-rootParent-userTag {
  font-size: var(--font-size-1) !important;
  line-height: 1 !important;
}

/* Counter */
.coral-counter {
  color: var(--palette-text-primary) !important;
  background-color: transparent !important;
  padding: 0 !important;
}
.coral-counter::before {
  font-size: var(--font-size-4);
  content: "(";
}

.coral-counter > span{
  font-size: var(--font-size-4) !important;
  font-family: var(--font-family-primary-bold) !important;
  color: var(--palette-text-primary) !important;
}

.coral-counter::after {
  font-size: var(--font-size-4);
  content: ")";
}

/* Comment tag */
.coral-comment-commentTag {
  padding: var(--spacing-1) var(--spacing-2) !important;
  font-size: var(--font-size-1) !important;
}

/* Reply to text */
.coral-createReplyComment-replyToText {
  color: var(--palette-grey-500) !important;
}

.coral-comment-inReplyToText,
.coral-comment-inReplyToText span {
  font-family: var(--font-family-primary-bold) !important;
  font-weight: var(--font-weight-primary-bold) !important;
  font-size: var(--font-size-1) !important;
}

/* Report button pressed state */
.coral-comment-reportButton[aria-pressed=true] {
  color: var(--palette-text-000) !important;
  background: var(--palette-primary-500) !important;
  border: 0;
}

/* Featured comment content */
.coral-featuredComment-content {
  font-size: var(--font-size-3) !important;
}

/* Disable reply list buttons */
.coral-replyList-showAllButton[disabled],
.coral-replyList-showMoreButton[disabled] {
  pointer-events: none;
  opacity: 0.4;
  cursor: default;
}

.coral-replyList-showAllButton:hover,
.coral-replyList-showMoreButton:hover {
  border-color: var(--palette-grey-400) !important;
  color: var(--palette-grey-400) !important;
  background: none !important;
}

/****************************************************
 *  Additional styles for the comments component  *
 ****************************************************/
.coral-tabBarSecondary-tab, .coral-tabBar-tab {
  font-size: var(--font-size-4) !important;
  font-family: var(--font-family-primary) !important;
  color: var(--palette-text-secondary) !important;
  margin-right: var(--spacing-4) !important;
  background-color: transparent !important;
  border-width: 0px !important;
  padding: 0px 0px var(--spacing-2) !important;
  border-bottom: 3px solid transparent !important;
  line-height: 1.25rem !important;
}

/* Active Tab */
.coral-tabBarSecondary-tab-active, .coral-tabBar-tab-active {
  font-size: var(--font-size-4) !important;
  font-family: var(--font-family-primary-bold) !important;
  color: var(--palette-text-primary) !important;
  border-bottom: 3px solid var(--palette-text-primary) !important;
  border-top-width: 0px !important;
  font-weight: var(--font-weight-primary-semi-bold) !important;
}

.coral-tabBar-tab-active::before {
  background-color: transparent !important;
  color: transparent !important;
}

.coral-tabBarSecondary-row {
  border-bottom: 1px solid var(--palette-border-subtle-01) !important;
}

.coral-tabBar-notifications {
  border-width: 1px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: var(--spacing-4) !important;
  padding-right: var(--spacing-4) !important;
  background: var(--palette-grey-100) !important;
  bottom: 1px;
  top: initial;
}

.coral-notifications-floating-root {
  z-index: 1000 !important;
}

.coral-streamFooter-link {
  color: var(--palette-text-500) !important;
  font-size: var(--font-size-1);
  display: none;
}

.coral-comment-edited {
  color: var(--palette-error-700);
  font-size: var(--font-size-1);
  text-transform: lowercase;
  font-weight: var(--font-weight-primary-regular);
}

.coral-indent {
  border-left: none;
}