/* THEME */
html,
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  height: 100%;
  background: #ECF0F3;
}

nav.navbar {
  border-top: 4px solid #276cda;
  margin-bottom: 1rem;
}

.navbar-item.brand-text {
  font-weight: 300;
}

.navbar-item,
.navbar-link {
  font-size: 14px;
  font-weight: 500;
  padding: 0.5rem 5px;
}

.subnav {
  padding: 10px 5px;
  font-weight: 400;
  margin-left: 8px;
}

.columns {
  width: 100%;
  height: 100%;
  margin-left: 0;
}

.menu-label {
  color: #8F99A3;
  letter-spacing: 1.3;
  font-weight: 700;
}

.menu-list a {
  color: #0F1D38;
  font-size: 14px;
  font-weight: 700;
}

.menu-list a:hover {
  background-color: transparent;
  color: #276cda;
}

.menu-list a.is-active {
  background-color: transparent;
  color: #276cda;
  font-weight: 700;
}

.card {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
  margin-bottom: 2rem;
}

.card-header-title {
  color: #8F99A3;
  font-weight: 400;
}

.info-tiles {
  margin: 1rem 0;
}

.info-tiles .subtitle {
  font-weight: 300;
  color: #8F99A3;
}

.hero.welcome.is-info {
  background: #36D1DC;
  background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC);
  background: linear-gradient(to right, #5B86E5, #36D1DC);
}

.hero.welcome .title,
.hero.welcome .subtitle {
  color: hsl(192, 17%, 99%);
}

.card .content {
  font-size: 14px;
}

.card-footer-item {
  font-size: 14px;
  font-weight: 700;
  color: #8F99A3;
}

.card-table .table {
  margin-bottom: 0;
}

.events-card .card-table {
  max-height: 250px;
  overflow-y: scroll;
}


/* Table scrollable */
.table-container {
  overflow-y: auto;
  max-height: 600px;
}


.table.is-scrollable tbody {
  overflow-y: auto;
}

.table.is-scrollable th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: white;

}

/* Filtering */
.filter-container input,
.filter-container select {

  border: 1px solid transparent;
  align-items: center;
  border-radius: .375em;
  box-shadow: none;
  display: inline-flex;
  font-size: 1rem;
  height: 2.5em;
  justify-content: flex-start;
  line-height: 1.5;
  padding-bottom: calc(.5em - 1px);
  padding-left: calc(.75em - 1px);
  padding-right: calc(.75em - 1px);
  padding-top: calc(.5em - 1px);
  position: relative;
  vertical-align: top;
  box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, .05);
  background-color: #fff;
  border-color: #dbdbdb;
  border-radius: .375em;
  color: #363636;
  width: 260px;
}

/* TOOLTIP Minimalist */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


/* FIDES APP */
/* Claim status */
.claim-status {
  min-width: 80px;
}

/* Claim status color */
.claim-status-done {
  background: #48c78e !important;
  color: white !important;
}

.claim-status-reopened {
  background: #af9ae9 !important;
  color: white !important;
}

.claim-status-in_progress {
  background: #83b7f1 !important;
  color: white !important;
}

.claim-status-pending {
  background: #dfae6d !important;
  color: white !important;
}

.claim-status-aborted {
  background: #606060 !important;
  color: white !important;
}

/* Notifications */
.notification-title {
  display: flex;
  margin-bottom: 5px;
  font-size: 15px;
}

.notification-title .icon {
  margin-right: 5px;
}

.notification-org {
  margin-top: 5px;
  text-align: right;
  font-style: italic;
  font-size: 14px;
}

.notification-content {
  text-align: left;
  line-height: 22px;
  font-size: 14px;
}

.notification-content a {
  color: #276cda !important
}

div.notification.is-read {
  opacity: 0.5;
}


/* NAVBAR */
.navbar-link i.las {
  margin-right: 6px;
  margin-left: 2px;
}