:root {
  --brand-5-soft: hsl(86, 32%, 46%); }

#wrapper.appcomm button#appcomm-toggle {
  color: var(--text-dark-bg); }

#wrapper.appcomm .appcomm-container {
  right: 0; }
  #wrapper.appcomm .appcomm-container .appcomm-textarea {
    width: 100%;
    height: inherit;
    padding: 4px;
    line-height: 2em;
    resize: none; }
    #wrapper.appcomm .appcomm-container .appcomm-textarea.edit-textarea {
      width: 90%; }

.appcomm-container > aside {
  position: absolute;
  z-index: 123;
  bottom: 185px;
  width: 100%; }

.appcomm-thread .user-comment-block.by-current-user {
  text-align: right; }

.appcomm-container {
  right: -400px;
  transition: right 0.2s ease-out;
  will-change: right;
  width: 400px;
  position: fixed;
  height: 100%;
  background: var(--header-color);
  color: var(--header-font-color);
  z-index: var(--z-index-layer-4);
  padding-top: 0px;
  box-shadow: 17px 14px 17px 12px #888888;
  clip: rect(0px, 400px, 10000px, -2px); }
  .appcomm-container .ba-dropdown:focus {
    outline: none; }

.appcomm-broadcast {
  width: 100%;
  position: absolute;
  bottom: 44px;
  background: #232323;
  height: 145px;
  z-index: 1;
  display: none; }
  .appcomm-broadcast.broadcaster-mode-ACTIVE {
    display: block; }
  .appcomm-broadcast fieldset, .appcomm-broadcast input[type=text] {
    width: 100%; }
  .appcomm-broadcast ul.broadcast-picker {
    height: 100%;
    overflow-y: scroll; }
  .appcomm-broadcast label, .appcomm-broadcast p, .appcomm-broadcast span {
    color: var(--text-dark-bg); }

.appcomm-comment {
  width: 100%;
  padding: 24px 12px;
  background: #232323;
  border-bottom: 1px solid var(--line-dark); }
  .appcomm-comment fieldset, .appcomm-comment input[type=text] {
    width: 100%; }

.appcomm-thread .comment-action {
  text-decoration: underline;
  cursor: pointer;
  padding-right: 4px; }
  .appcomm-thread .comment-action:hover {
    color: var(--line-dark); }

.appcomm-controlbar {
  position: absolute;
  left: 0;
  z-index: 1234;
  width: 100%;
  background: #232323;
  border-top: 1px solid var(--line-dark);
  height: 45px;
  bottom: 0; }
  .appcomm-controlbar h2.appcomm-setting-title {
    color: var(--text-dark-bg); }
  .appcomm-controlbar .appcomm-setting-item label {
    font-size: 1.2em; }
  .appcomm-controlbar .appcomm-setting-item i {
    font-size: 1.3em; }

.appcomm-settings {
  position: absolute;
  left: 0;
  z-index: 1234;
  width: 100%;
  background: #232323;
  border-bottom: 1px solid var(--line-dark);
  height: 45px;
  top: 45px; }
  .appcomm-settings.active {
    height: 100%; }
  .appcomm-settings h2.appcomm-setting-title {
    color: var(--text-dark-bg); }
  .appcomm-settings .appcomm-setting-item label {
    font-size: 1.2em; }
  .appcomm-settings .appcomm-setting-item i {
    font-size: 1.3em; }

.broadcast-picker {
  background: var(--bg);
  height: 100%;
  position: relative;
  z-index: 123;
  top: 24px; }
  .broadcast-picker .leaf-label::before {
    content: none; }

.current-broadcast-target p {
  margin: 0 0 0 5px;
  font-size: 13px; }

.current-broadcast-target span.change-user {
  text-decoration: underline;
  cursor: pointer; }
  .current-broadcast-target span.change-user:hover {
    color: var(--text-light); }

.appcomm-comm .appcomm-unseen {
  color: white;
  position: fixed;
  z-index: var(--z-index-layer-5);
  right: 5px;
  top: 15px;
  height: 15px;
  width: 15px;
  text-align: center;
  line-height: 15px;
  border-radius: 100%;
  background: var(--hazard);
  font-size: 8px;
  pointer-events: none;
  transition: opacity 0.3s ease-in; }

.appcomm-comm .appcomm-unseen:empty {
  opacity: 0; }

.appcomm-item-editor fieldset {
  width: 100%; }

.appcomm-item-editor button {
  width: 40px;
  margin-right: 4px; }

.appcomm-comm a {
  color: var(--highlight-lighter);
  text-decoration: none; }
  .appcomm-comm a:hover {
    text-decoration: underline; }
  .appcomm-comm a:visited {
    color: var(--highlight-lighter); }

.appcomm-comm p.unread-comments {
  position: absolute;
  bottom: 20px;
  right: 12px;
  color: var(--hazard); }

.appcomm-comm .comm-meta {
  opacity: 0.82; }

.appcomm-settings-dropdown-container {
  background: #fff;
  padding: 12px;
  border: 1px solid #225b87;
  margin: 16px 4px 0 0;
  position: fixed;
  z-index: 123;
  width: 370px; }
  .appcomm-settings-dropdown-container label {
    color: #225b87; }