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;
}

.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;
}