:root {
  --org-primary:   #19a4e6;
  --org-secondary: #e96310;
  --org-accent:    #9ac43c;
  --org-neutral:   #f8f9fa;
  --org-dark:      #4b5764;
}

.t-Button--primary {
  background-color: var(--org-primary);
  color: #000000;
}
.t-Button--secondary {
  background-color: var(--org-secondary);
  color: #000000;
}

.t-Region {
  background-color: var(--org-neutral);
  color: var(--org-dark);
  border-radius: 6px;
}

.t-Report-report thead {
  background-color: var(--org-primary);
  color: #000000;
}

.t-Report-report tbody tr:nth-child(even) {
  background-color: #e9f4fc;
}

.t-Text, .t-Body-contentInner, .t-Region-body {
  color: var(--org-dark);
}
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* for the body content background */
.t-Body-main {
  animation: fadeSlideIn 0.6s ease both;
}

.t-Body-content {
  background: linear-gradient(to bottom right, #f8f9fa, #e6f7ff);
}
/*For the buttons it makes them pop up when you hover over them*/
a.t-Button, button.t-Button {
  transition: all 0.3s ease;
}

a.t-Button:hover, button.t-Button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/*Makes the header slide/fade into the page nice effect to add*/
.t-Region-title {
  animation: slideFade 0.6s ease-out;
}

@keyframes slideFade {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}