/* Variables */
:root {
  --option-gray: #9d9d9d;
  --primary: #3e83f3;
  --gray-read: #f9fafb;
}

a {
  text-decoration: none !important;
}

.document-read {
  background-color: var(--gray-read) !important;
}

.document-status {
  background-color: #e2f6e3;
  border-radius: 10000px !important;
  padding: 4px 12px 4px 12px;
  color: #40a746 !important;
}

.document-option {
  color: var(--option-gray) !important;
}

.document-option-primary {
  color: var(--primary) !important;
}

.pagination-number {
  color: black !important;
  border: 1px solid #e5e7eb !important;
  background-color: #ffffff !important;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  width: 36px !important;
  height: 36px !important;
}

.pagination-number.active {
  color: white !important;
  background-color: var(--primary) !important;
}

.pagination-arrow {
  color: black !important;
  border: 1px solid #e5e7eb !important;
  background-color: #ffffff !important;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  padding: 5px 16px 5px 16px !important;
}

.pagination-left {
  display: flex;
}

.pagination-right {
  justify-content: end;
  display: flex;
}

.document-title {
  color: black !important;
  word-break: break-all;
}

/* RESPONSIVE */
@media screen and (max-width: 575px) {
  .pagination-left {
    display: flex;
    justify-content: center;
  }

  .pagination-right {
    justify-content: center;
    display: flex;
    margin-top: 10px !important;
  }
}