/* CSS VARIABLES */

:root {
    --main-color: #90b324;
    --main-hover-color: color-mix(in srgb, var(--main-color), #000 20%);
}

/* Bootstrap customizations */

.btn-outline-primary {
    --bs-btn-color: var(--main-color);
    --bs-btn-border-color: var(--main-color);
    --bs-btn-hover-bg: var(--main-hover-color);
    --bs-btn-hover-border-color: var(--main-hover-color);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--main-color);
  --bs-btn-border-color: var(--main-color);
  --bs-btn-hover-bg: var(--main-hover-color);
  --bs-btn-hover-border-color: var(--main-hover-color);
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-color);
    --bs-btn-active-border-color:   var(--main-color);
}

.pagination {
    .page-link {
      color: var(--main-color);

      &:hover {
        color: var(--main-color);
      }
    }

    .active > .page-link, .page-link.active {
      z-index: 3;
      color: var(--bs-pagination-active-color);
      background-color: var(--main-color);
      border-color: var(--main-color);
    }
}

/* GENERAL */

body {
    background-color: #f8f9fa;
}

/* FORMS */

.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}

/* Assignment row marked for deletion */

.row-marked-for-deletion {
    background-color: rgba(220, 53, 69, 0.05);
    border-color: rgba(220, 53, 69, 0.4) !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.row-marked-for-deletion .card-body {
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}