/** Global styles */
.hide, .xbee-hide {
  display: none !important; }

#adminmenu li#toplevel_page_xcoobee .wp-menu-image img {
  height: 16px; }

#xbee-message-logs th,
#xbee-data-requests th {
  padding-left: 10px; }

#xbee-message-logs .status,
#xbee-data-requests .status {
  padding: 5px 10px;
  border-radius: 4px;
  color: #777;
  background: #e5e5e5; }
  #xbee-message-logs .status.delivered,
  #xbee-data-requests .status.delivered {
    background: #f8dda7;
    color: #94660c; }
  #xbee-message-logs .status.failed,
  #xbee-data-requests .status.failed {
    background: #eba3a3;
    color: #761919; }
  #xbee-message-logs .status.seen,
  #xbee-data-requests .status.seen {
    background: #c8d7e1;
    color: #2e4453; }
  #xbee-message-logs .status.read,
  #xbee-data-requests .status.read {
    background: #c6e1c6;
    color: #5b841b; }

/** Plugin settings. */
.wrap.xbee {
  /** Section */
  /** Tabs */
  /** General tab. */
  /** Addons tab. */ }
  .wrap.xbee .postbox .inside {
    margin-bottom: 0; }
  .wrap.xbee .radio-buttons-group {
    display: inline-flex; }
    .wrap.xbee .radio-buttons-group label {
      width: 25%;
      line-height: 28px;
      padding: 0 1em;
      background: #f2f2f2;
      box-shadow: 1px 1px 1px #d2d2d2; }
      .wrap.xbee .radio-buttons-group label:first-of-type {
        border-radius: 5px 0 0 5px; }
      .wrap.xbee .radio-buttons-group label:last-of-type {
        border-radius: 0 5px 5px 0; }
      .wrap.xbee .radio-buttons-group label.checked {
        background: #d8d8d8; }
      .wrap.xbee .radio-buttons-group label input {
        display: none; }
  .wrap.xbee .nav-tab-wrapper {
    margin-bottom: 10px; }
  .wrap.xbee .xbee-notification {
    display: none;
    margin-top: 10px;
    cursor: default; }
    .wrap.xbee .xbee-notification .message {
      border-left: 3px #428bca solid;
      color: #000;
      background-color: #fff;
      padding: 5px 10px;
      display: inline-block; }
    .wrap.xbee .xbee-notification.xbee-success .message {
      border-color: #5cb85c; }
    .wrap.xbee .xbee-notification.xbee-error .message {
      border-color: #d9534f; }
    .wrap.xbee .xbee-notification.xbee-warning .message {
      border-color: #f0ad4e; }
    .wrap.xbee .xbee-notification.xbee-info .message {
      border-color: #5bc0de; }
  .wrap.xbee input#test-keys {
    display: inline-block; }
  .wrap.xbee .form-table td {
    vertical-align: top; }
  .wrap.xbee .form-table [disabled] {
    cursor: not-allowed; }
  .wrap.xbee .form-table.condensed td {
    padding: 0; }
  .wrap.xbee .form-table .wp-picker-container .wp-color-result {
    margin-right: 5px;
    box-shadow: 0 2px 10px #9c9c9c !important;
    width: 27px;
    height: 27px;
    padding: 0;
    border-radius: 50%;
    display: inline-block;
    border: none;
    box-shadow: none; }
  .wrap.xbee .form-table .wp-picker-container .wp-picker-input-wrap .wp-color-picker {
    margin: 0 5px 0 0; }
  .wrap.xbee .form-table .iris-picker {
    position: absolute;
    z-index: 100;
    display: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-top: 5px; }
    .wrap.xbee .form-table .iris-picker .ui-slider {
      border: 0 !important;
      margin: 0 !important;
      width: auto !important;
      height: auto !important;
      background: none transparent !important; }
      .wrap.xbee .form-table .iris-picker .ui-slider .ui-slider-handle {
        margin-bottom: 0 !important; }
  .wrap.xbee .form-table .iris-error {
    background-color: #ffafaf; }
  .wrap.xbee .form-table .colorpickpreview {
    padding: 7px 0;
    line-height: 1em;
    display: inline-block;
    width: 26px;
    border: 1px solid #ddd;
    font-size: 14px; }
  .wrap.xbee .tabs {
    display: table;
    width: 100%; }
    .wrap.xbee .tabs:after {
      display: block;
      content: "";
      clear: both; }
    .wrap.xbee .tabs .tabs-nav {
      display: table-cell;
      vertical-align: top;
      width: 30%; }
      .wrap.xbee .tabs .tabs-nav a.nav {
        color: #444;
        text-decoration: none;
        display: block;
        padding: 10px;
        cursor: pointer; }
        .wrap.xbee .tabs .tabs-nav a.nav code {
          background: initial;
          color: #23282d;
          padding: 0;
          display: block;
          font-weight: bold;
          margin-bottom: 5px; }
        .wrap.xbee .tabs .tabs-nav a.nav.active {
          background: #d2d2d2; }
        .wrap.xbee .tabs .tabs-nav a.nav:hover {
          background: #eee; }
    .wrap.xbee .tabs .tabs-content {
      width: 70%;
      display: table-cell;
      vertical-align: top;
      border-left: 4px #d2d2d2 solid;
      padding: 10px; }
      .wrap.xbee .tabs .tabs-content .content {
        display: none; }
        .wrap.xbee .tabs .tabs-content .content.active {
          display: block; }
  .wrap.xbee .section {
    border: 1px #e2e2e2 solid;
    box-shadow: 0 0 1px 1px #f1f1f1;
    padding: 16px;
    position: relative; }
    .wrap.xbee .section > .headline {
      position: absolute;
      line-height: 20px;
      top: -10px;
      font-size: 20px;
      left: 25px;
      padding: 0 10px;
      background: #fff; }
    .wrap.xbee .section.disabled h2,
    .wrap.xbee .section.disabled p,
    .wrap.xbee .section.disabled th,
    .wrap.xbee .section.disabled label,
    .wrap.xbee .section.disabled a,
    .wrap.xbee .section.disabled a:hover {
      color: #a0a5aa !important; }
    .wrap.xbee .section.shortcodes .example, .wrap.xbee .section.helper-functions .example {
      background: #0185b9;
      color: #fff;
      padding: 10px;
      margin-top: 20px;
      position: relative; }
      .wrap.xbee .section.shortcodes .example .xbee-copy-text:after, .wrap.xbee .section.helper-functions .example .xbee-copy-text:after {
        content: "";
        background: url("../../images/icon-copy-white.svg");
        background-repeat: no-repeat;
        background-size: contain;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        opacity: 1;
        transition: 0.1s all ease; }
      .wrap.xbee .section.shortcodes .example .xbee-copy-text:active:after, .wrap.xbee .section.helper-functions .example .xbee-copy-text:active:after {
        opacity: 0.5;
        transition: 0.1s all ease; }
      .wrap.xbee .section.shortcodes .example .xbee-copy-text .tt, .wrap.xbee .section.helper-functions .example .xbee-copy-text .tt {
        display: none;
        position: absolute;
        top: 11px;
        right: -27px;
        background: #e1e1e1;
        color: #6b6b6b;
        padding: 2px 3px;
        font-size: 12px;
        z-index: 100; }
      .wrap.xbee .section.shortcodes .example .headline, .wrap.xbee .section.helper-functions .example .headline {
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px; }
      .wrap.xbee .section.shortcodes .example code, .wrap.xbee .section.helper-functions .example code {
        padding: 0;
        background: none;
        line-height: 1.5; }
    .wrap.xbee .section.shortcodes table.shortcode-info, .wrap.xbee .section.helper-functions table.shortcode-info {
      width: 100%; }
      .wrap.xbee .section.shortcodes table.shortcode-info tr th,
      .wrap.xbee .section.shortcodes table.shortcode-info tr td, .wrap.xbee .section.helper-functions table.shortcode-info tr th,
      .wrap.xbee .section.helper-functions table.shortcode-info tr td {
        padding: 10px;
        text-align: left; }
  .wrap.xbee .tab .intro {
    background: #eee;
    padding: 20px; }
    .wrap.xbee .tab .intro:after {
      content: "";
      display: block;
      clear: both; }
    .wrap.xbee .tab .intro .right {
      width: 75%;
      margin-right: 5%;
      float: left; }
      .wrap.xbee .tab .intro .right h2 {
        margin: 0 0 1em 0; }
      .wrap.xbee .tab .intro .right p {
        margin: 0 0 1em 0;
        font-size: 1.2em; }
    .wrap.xbee .tab .intro .left {
      width: 20%;
      float: left;
      text-align: right; }
      .wrap.xbee .tab .intro .left img {
        width: 80px; }
  .wrap.xbee .tab .section {
    margin-top: 40px; }
  .wrap.xbee .tab p.message {
    font-size: 1.2em; }
  .wrap.xbee .tab-general input.endpoint-prefix {
    width: auto;
    background: #ededed; }
  .wrap.xbee .tab-addons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; }
    .wrap.xbee .tab-addons .addon {
      width: 32.5%;
      padding: 2%;
      margin-bottom: 1.25%;
      box-sizing: border-box;
      background: #ededed;
      text-align: center; }
      .wrap.xbee .tab-addons .addon .name {
        font-size: 18px; }
      .wrap.xbee .tab-addons .addon .icon {
        height: 60px;
        margin: 0 auto; }
      .wrap.xbee .tab-addons .addon .action-links {
        margin: 10px 0 0; }
        .wrap.xbee .tab-addons .addon .action-links li {
          margin: 0; }
    .wrap.xbee .tab-addons:after {
      content: "";
      display: block;
      clear: both; }

/** Overlay */
#xbee-overlay {
  background: rgba(255, 255, 255, 0.85);
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000000; }
  #xbee-overlay .loader {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
    #xbee-overlay .loader img {
      display: block;
      margin: 0 auto; }
      #xbee-overlay .loader img.icon-xcoobee {
        margin-top: 1em;
        max-width: 60px; }
      #xbee-overlay .loader img.loader {
        margin-top: 1em;
        height: 20px; }

/** Profile */
#profile-page .xbee-clear-message-logs {
  margin-top: 10px;
  display: inline-block;
  color: #dc3232;
  text-decoration: none; }
  #profile-page .xbee-clear-message-logs:hover {
    text-decoration: underline; }