/* National Coalition theme for JChat's site-wide widgets and front-end views. */
#jchat_base,
div.jchat_tabpopup,
#jchat_private_messaging,
#jchat_conference_container,
#activation_form,
#jes_mod_jchatpm {
  font-family: var(--font-sans);
}

#jchat_userstab.jchat_tab {
  border-color: var(--navy);
  border-top: 2px solid var(--gold);
  background-color: var(--navy) !important;
  background-image: none;
  color: #fff;
}

#jchat_userstab.jchat_tab:hover,
#jchat_userstab.jchat_tab:focus-visible {
  background-color: var(--navy-light) !important;
}

#jchat_userstab_text {
  color: #fff;
  font-weight: 700;
}

div.jchat_tabpopup span.jchat_tab {
  border-color: var(--navy) !important;
  border-top: 2px solid var(--gold);
  border-top-color: var(--gold) !important;
  background-color: var(--navy) !important;
  color: #fff;
}

div.jchat_tabpopup .jchat_userstabtitle,
div.jchat_tabpopup .jchat_userstabsubtitle {
  border-color: var(--line-dark);
  background-color: var(--navy) !important;
  color: #fff;
}

div.jchat_tabpopup .jchat_userstabtitle:not(#jchat_optionsbutton_popup .jchat_userstabtitle) {
  background-image: none;
}

div.jchat_tabpopup .jchat_tabcontent,
div.jchat_tabpopup .jchat_tabsubtitle,
div.jchat_tabpopup .jchat_tabcontentinput {
  border-color: var(--line-dark);
}

div.jchat_tabpopup .jchat_tabcontent {
  color: var(--ink);
}

div.jchat_tabpopup .jchat_userlist.jchat_userlist_hover {
  border-color: var(--line);
  background-color: var(--mist-blue) !important;
}

div.jchat_tabpopup .jchat_textarea,
#jchat_private_messaging .jchat_textarea {
  color: var(--ink);
  font-family: var(--font-sans);
}

div.jchat_tabpopup span.jchat_chatboxmessagecontent,
#jchat_private_messaging span.jchat_chatboxmessagecontent {
  border-color: var(--line-dark);
  background-color: #f5f6f7;
  color: var(--ink);
  text-shadow: none;
}

div.jchat_tabpopup span.jchat_chatboxmessagecontent.selfmessage,
#jchat_private_messaging span.jchat_chatboxmessagecontent.selfmessage {
  background-color: #e8eff6;
}

div.jchat_tabpopup span.jchat_chatboxmessagecontent::before,
#jchat_private_messaging span.jchat_chatboxmessagecontent::before {
  background-color: #f5f6f7;
}

div.jchat_tabpopup span.jchat_chatboxmessagecontent.selfmessage::before,
#jchat_private_messaging span.jchat_chatboxmessagecontent.selfmessage::before {
  background-color: #e8eff6;
}

div.jchat_tabpopup span.jchat_chatboxmessagefrom img,
#jchat_private_messaging .jchat_usersbox_avatar {
  border-radius: 50%;
  object-fit: cover;
}

#main > #jchat_private_messaging:not(.jchat_maximized),
#main > #jchat_conference_container,
#main > #activation_form {
  width: min(var(--container), calc(100% - 64px));
  margin: 32px auto 80px;
}

#jchat_private_messaging {
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  background-color: #fff;
}

#jchat_private_messaging #jchat_left_userscolumn {
  border-color: var(--line);
}

#jchat_private_messaging #jchat_userslist li.jchat_userbox.jchat_active,
#jchat_private_messaging #jchat_userslist li.jchat_userbox.jchat_active div {
  background-color: var(--navy) !important;
  color: #fff;
}

#jchat_private_messaging #jchat_userslist li:not(.jchat_active):hover {
  background-color: var(--mist-blue);
}

#jchat_private_messaging #jchat_leftusers_search,
#jchat_private_messaging .jchat_fullcolumn_input .jchat_textarea,
#jchat_private_messaging .jchat_userslist_ctrls {
  border-color: var(--line-dark) !important;
}

#jchat_private_messaging .jchat_fullcolumn_input {
  border-color: var(--line);
  background-color: #f5f6f7;
}

#jchat_private_messaging div.jchat_userslist_ctrls div.jchat_userslist_reply {
  border-color: var(--navy) !important;
  background-color: var(--navy) !important;
  color: #fff;
}

#jchat_private_messaging div.jchat_userslist_ctrls div.jchat_userslist_reply:hover,
#jchat_private_messaging div.jchat_userslist_ctrls div.jchat_userslist_reply:active {
  border-color: var(--red) !important;
  background-color: var(--red) !important;
}

#activation_form .jchat_fieldsets {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  background: #fff;
}

#activation_form .input-group .input-group-addon {
  border-color: var(--line-dark);
  background: #f5f6f7;
  color: var(--navy);
  text-shadow: none;
}

#activation_form input[type="submit"],
input.jchat_button_exit_chat {
  background: var(--navy) !important;
  color: #fff;
}

#activation_form input[type="submit"]:hover,
input.jchat_button_exit_chat:hover {
  background: var(--red) !important;
}

#jes_mod_jchatpm .list-group-item {
  border-color: var(--line);
}

#jes_mod_jchatpm .list-group-item.title,
#jes_mod_jchatpm .list-group-item.counter {
  background-color: var(--navy);
  color: #fff;
}

#jes_mod_jchatpm .list-group-item.title {
  border-top: 3px solid var(--gold);
}

#jes_mod_jchatpm .list-group-item a {
  color: var(--navy);
}

#jes_mod_jchatpm .list-group-item.title a {
  color: #fff;
}

@media (max-width: 640px) {
  #main > #jchat_private_messaging:not(.jchat_maximized),
  #main > #jchat_conference_container,
  #main > #activation_form {
    width: calc(100% - 32px);
    margin-top: 20px;
    margin-bottom: 48px;
  }

  #jchat_private_messaging .jchat_userslist_reply_info {
    display: none;
  }
}
