html,
body,
#root {
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  padding-top: 3rem;
  padding-bottom: 3rem;
  flex: 1;
}

.tab-content {
  padding-top: 1rem;
}

.algolia-autocomplete {
  width: 100%;
}

nav .algolia-autocomplete {
  width: auto;
}

.fa-sign-out-alt {
  padding-left: 5px;
}

.algolia-autocomplete .aa-input,
.algolia-autocomplete .aa-hint {
  width: 100%;
}

.algolia-autocomplete .aa-hint {
  color: #999;
}

.algolia-autocomplete .aa-dropdown-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid #999;
  border-top: none;
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor,
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion[aria-selected="true"],
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion:hover {
  background-color: #b2d7ff;
  text-decoration: none;
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
  font-weight: bold;
  font-style: normal;
}

.aa-suggestions-category {
  border-bottom: 2px solid rgba(228, 228, 228, 0.6);
  border-top: 2px solid rgba(228, 228, 228, 0.6);
  padding: 6px 12px;
  color: #a9a9a9;
}

/* Dark Mode Styles */
html.tw-dark .algolia-autocomplete .aa-hint {
  color: #ccc;
}

html.tw-dark .algolia-autocomplete .aa-dropdown-menu {
  background-color: #2d2d2d;
  border: 1px solid #555;
  border-top: none;
}

html.tw-dark .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
  color: #ddd;
}

html.tw-dark .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor,
html.tw-dark
  .algolia-autocomplete
  .aa-dropdown-menu
  .aa-suggestion[aria-selected="true"],
html.tw-dark .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:hover {
  background-color: #444;
  text-decoration: none;
}

html.tw-dark .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
  color: #fff;
}

html.tw-dark .aa-suggestions-category {
  border-bottom: 2px solid rgba(100, 100, 100, 0.6);
  border-top: 2px solid rgba(100, 100, 100, 0.6);
  color: #bbb;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  margin-right: 0.25em;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

a.badge:focus,
a.badge:hover {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-default {
  background-color: #636c72;
}

.badge-default[href]:focus,
.badge-default[href]:hover {
  background-color: #4b5257;
}

.badge-primary {
  background-color: #0275d8;
}

.badge-primary[href]:focus,
.badge-primary[href]:hover {
  background-color: #025aa5;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-success[href]:focus,
.badge-success[href]:hover {
  background-color: #449d44;
}

.badge-pod {
  background-color: LimeGreen;
}

.badge-pm {
  background-color: MediumOrchid;
}

.badge-li {
  background-color: Orange;
}

.badge-region {
  background-color: HotPink;
}

.badge-evt {
  background-color: Peru;
}

.badge-other {
  background-color: DeepSkyBlue;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-info[href]:focus,
.badge-info[href]:hover {
  background-color: #31b0d5;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-warning[href]:focus,
.badge-warning[href]:hover {
  background-color: #ec971f;
}

.badge-danger {
  background-color: #d9534f;
}

.badge-danger[href]:focus,
.badge-danger[href]:hover {
  background-color: #c9302c;
}

.dropdown-menu {
  z-index: 1200;
}

a.icon i.fas {
  color: lightgray;
}

a.icon:hover i.fas {
  color: gray;
}

.navbar a i.fas {
  color: gray;
}

.navbar a:hover i.fas {
  color: white;
}

.column-display {
  background-color: #f4f4f4;
  padding: 5px 5px 2px 5px;
  margin-bottom: 10px;
  border-top: 1px solid #ced4da;
  border-bottom: 1px solid #bcbcbc;
}
.column-display label {
  float: left;
}
.column-display ul {
  margin: 0;
  list-style: none;
  float: left;
}
.column-display ul li {
  display: inline;
  margin-right: 20px;
}
.column-display .clr {
  clear: both;
  font-size: 0;
}

.avatar {
  border-radius: 50%;
}

table.connections {
  width: 100%;
}

.connections tr {
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ddd;
}
.connections tr:last-child {
  border-bottom: none;
}

.dz-container-outer {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  overflow: visible;
}
.dz-container-outer .dropzone-previews {
  margin-top: 2em;
  margin-right: 2em;
  opacity: 0;
}
.dz-container-outer .dz-error-message {
  opacity: 1 !important;
}

.entity-list-form input[type="checkbox"] {
  transform: scale(1.5);
  margin: 20px 0 0 5px;
}

.float-right {
  margin-left: 10px;
}

.impersonation {
  padding: 3px;
}

input:invalid,
select:invalid {
  border-color: red;
}

.no-underline,
.no-underline:hover {
  text-decoration: none;
}

/* Disable SimpleMde colours and their theming system since we can control it with Tailwind */
.tw-dark .CodeMirror {
  background: inherit !important;
  color: inherit !important;
}

.no-border-simple-mde .editor-toolbar {
  border: 0;
}

.no-border-simple-mde .CodeMirror {
  border: 0;
}

.extension-only {
  display: none !important;
}

.browser-extension .extension-only {
  display: block !important;
}
.browser-extension .web-only {
  display: none !important;
}

.activities-timeline .email-item {
  display: none;
}

.activities-timeline.show-emails .email-item {
  display: block;
}