html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* https://stackoverflow.com/questions/30099310/how-to-fix-background-content-shaking-issue-on-desktop-browser-triggered-by-scro */
}

@keyframes blue-shadow {
    from { box-shadow: 0 0 10px -10px #9ab8fd; }
    to { box-shadow: 0 0 10px 10px #9ab8fd; }
}

@keyframes yellow-shadow {
    from { box-shadow: 0 0 10px -10px #fddc9a; }
    to { box-shadow: 0 0 10px 10px #fddc9a; }
}

@keyframes purple-shadow {
    from { box-shadow: 0 0 10px -10px #6e3d6e; }
    to { box-shadow: 0 0 10px 10px #6e3d6e; }
}

@keyframes green-shadow {
    from { box-shadow: 0 0 10px -10px #74ff74; }
    to { box-shadow: 0 0 10px 10px #74ff74; }
}

@keyframes gray-shadow {
    from { box-shadow: 0 0 5px -5px #bababa; }
    to { box-shadow: 0 0 5px 5px #bababa; }
}

nav {
    margin-bottom: 20px;
}

div.footer {
    text-align: center;
    font-size: smaller;
}

div.card {
    margin-bottom: 20px;
}

.bus-button {
    background-color: #ffcf02;
    color: #000000;
    border: 1px solid #e3b800;
}

.bus-button:hover {
    background-color: #f7ca08;
}

.bus-container .card-header {
    background-color: #ffcf02;
    color: #000000;
}

.login-btn {
    background-color: #1a4a7d;
    color: #f0f0f0;
    border: 1px solid #0f3b6b;
    font-size: 125%;
    animation: blue-shadow 2s 20 alternate;
}

.login-btn div.box {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

.login-btn div.box img {
    margin-right: 10px;
}

.login-btn:hover {
    background-color: #1a3a5d;
    color: #ffffff;
    border: 1px solid #062b53;
    cursor: pointer;
}

.impersonation-bar {
    width: 100%;
    background-color: #3c3c3c;
    color: #ededed;
    font-family: Roboto, sans-serif;
    border-bottom: 5px dashed #ededed;
}

.impersonation-bar .btn {
    background-color: #2a2a2a;
    color: #ededed;
    border: 1px solid #000000;
}

.card-danger .card-header {
    background-color: #5a0e0e;
    color: #ffffff;
}

.card-danger .card-body {
    background-color: #f8dfdf;
    border: 1px solid #5a0e0e;
}

.card-danger .card-body .table td, .card-danger .card-body .table thead th {
    border-color: #e1c0be;
}

.blue-shadow-animate {
    animation: blue-shadow 2s 20 alternate;
}

.yellow-shadow-animate {
    animation: yellow-shadow 2s 20 alternate;
}

.green-shadow-animate {
    animation: green-shadow 2s 20 alternate;
}

.gray-shadow-animate {
    animation: gray-shadow 2s 20 alternate;
}

.filter-glow {
    animation: glowPulse 1.5s infinite;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
}

@keyframes glowPulse {
    0% { box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); }
    50% { box-shadow: 0 0 8px rgba(0, 123, 255, 0.9); }
    100% { box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); }
}

.big-btn {
    padding: 15px;
    font-size: 125%;
}

.yellow-card .card-header {
    background-color: #ffbf00;
}

.yellow-card {
    border-color: #ffd000;
}

.green-card .card-header {
    background-color: #0d6621;
    color: #ffffff;
}

.green-card {
    border-color: #20923b;
}

.gray-card .card-header {
    background-color: #a6a6a6;
    color: #ffffff;
}

.gray-card {
    border-color: #a7a7a7;
}

.filepond--root {
    margin-bottom: 0;
}

.input-validation-success ~ .select2 .select2-selection {
    border: 2px solid #1086009d;
}

.input-validation-error ~ .select2 .select2-selection {
    border: 2px solid #8600009d;
}

.wide-badge {
    margin-right: 10px;
}

.chart-resource {
    max-width: 99%;
}

.student-element {
    margin-top: 10px;
    text-align: center;
}

/* .badge-iep {
    font-size: larger;
    color: #fefefe;
    background-color: #4e004e;
} */

.badge-truant {
    font-size: larger;
}

.fc-event {
    cursor: pointer;
}

div#incident_calendar a {
    color: #000000;
}

.calendar-event-complete .fc-event-title,
.calendar-event-complete .fc-list-event-title,
.calendar-event-complete .fc-list-event-title a,
.calendar-event-complete .fc-list-item-title,
.calendar-event-complete .fc-list-item-title a {
    text-decoration: line-through;
}

.location-sync-checkbox {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    border: 2px solid #ffffff;
}

div.expiration-bar {
    width: 100%;
    background-color: #ffc400;
    color: #000000;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

.notification-detail-badge {
    cursor: pointer;
}

.notification-detail-message {
    font-size: smaller;
    color: #6c6c6c;
}

.darkblue-card .card-header {
    background-color: #080d42;
    color: #f0f0f0;
}

.darkblue-card {
    border-color: #080d42;
}

.help-button {
    color: #202020;
    font-size: 150%;
}

.help-button:hover {
    color: #000000;
    font-size: 150%;
}

span.redact-minor-replace-highlight {
    border-bottom: 3px solid #e2a900;
    font-weight: bold;
    font-size: larger;
    padding-bottom: 1px;
}

.redacted-minor-narrative-block {
    border-left: 5px solid #e2a900;
    padding-left: 20px;
}

.original-minor-narrative-block {
    border-left: 5px solid #414157;
    padding-left: 20px;
}

.sortable-handle {
    cursor: move;
	cursor: -webkit-grabbing;
}

.long-dropdown-scroll .action-code-class-list {
  max-height: clamp(200px, 50vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Row accents */
.attn-marked   { border-left: 4px solid #28a745; } /* green */
.attn-unmarked { border-left: 4px solid #ced4da; } /* gray */
.attn-changed  { border-left: 4px solid #ffc107; } /* amber */

/* Status chip inside the “Attendance status” cell */
.attn-chip {
  display: inline-flex; align-items: center;
  font-size: .8rem; line-height: 1; padding: .15rem .4rem;
  border-radius: 10rem; background: #f8f9fa; color: #6c757d;
  border: 1px solid #e9ecef; margin-left: .5rem;
}
.attn-chip .dot {
  width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; margin-right: .3rem;
  background: #adb5bd; /* default */
}
.attn-chip.marked  { color: #155724; border-color: #c3e6cb; background: #eaf7ea; }
.attn-chip.marked .dot { background: #28a745; }
.attn-chip.changed { color: #856404; border-color: #ffe8a1; background: #fffbea; }
.attn-chip.changed .dot { background: #ffc107; }

#attendance_activity_card .card-header { cursor: pointer; }
#attendance_activity_card .toggle-icon {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
#attendance_activity_card .card-header:not(.collapsed) .toggle-icon {
  transform: rotate(180deg);
}

.student-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.student-badges .badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  padding: 2px 6px;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.student-badges .badge i {
  line-height: 1;
  font-size: 1em;
}

.student-badges .badge:empty {
  display: none;
}

.badge-iep {
  background-color: #6f42c1;
  color: #fff;
  font-weight: 600;
}

div.report-link {
    background-color: #08194a;
    padding: 20px;
    color: #ffffff;
    border: 1px solid #05123a;
    margin-bottom: 10px;
}
div.report-link:hover {
    background-color: #030d2e;
    animation-name: report-blue-shadow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-iteration-count: 1;
}
div.report-link a, div.report-link a:hover {
    color: #ffffff;
    font-size: 125%;
}

div.report-link.report-link-purple {
    background-color: #3f004a;
}
div.report-link.report-link-purple:hover {
    background-color: #2c0034;
    animation-name: report-purple-shadow;
}

div.report-link.report-link-yellow {
    background-color: #f8c200;
    border-color: #c09100;
    color: #0f0f0f;
}
div.report-link.report-link-yellow:hover {
    background-color: #f8c200;
    border-color: #c09100;
    color: #000000;
    animation-name: report-yellow-shadow;
}
div.report-link.report-link-yellow a, div.report-link.report-link-yellow a:hover {
    color: #000000;
    font-size: 125%;
}

div.report-link.report-link-green {
    background-color: #0d6621;
    border-color: #065417;
    color: #ffffff;
}
div.report-link.report-link-green:hover {
    background-color: #0d6621;
    border-color: #065417;
    color: #ffffff;
    animation-name: report-green-shadow;
}
div.report-link.report-link-green a, div.report-link.report-link-green a:hover {
    color: #ffffff;
    font-size: 125%;
}

div.report-link.report-link-gray {
    background-color: #6b747d;
    border-color: #5e666d;
    color: #ffffff;
}
div.report-link.report-link-gray:hover {
    background-color: #6b747d;
    border-color: #5e666d;
    color: #ffffff;
    animation-name: report-gray-shadow;
}
div.report-link.report-link-gray a, div.report-link.report-link-gray a:hover {
    color: #ffffff;
    font-size: 125%;
}

.air-datepicker { --adp-z-index: 2000; }