html, body {
  height: 100%; }

body.adminBody {
  padding-top: 3.5em; }

.clickable {
  cursor: pointer;
  color: blue; }

.hide {
  display: none !important; }

a {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none; }

.admin_users_edit .rolesFlex {
  display: flex;
  flex-wrap: wrap; }
  .admin_users_edit .rolesFlex label {
    padding-right: 2em; }

.admin_attendance_view .dateRow {
  text-align: center;
  font-weight: bold; }
.admin_attendance_view tr.even {
  background-color: #f0f0f0; }

.admin {
  padding: 1rem; }
  @media (min-width: 768px) {
    .admin {
      padding: 2rem; } }
  @media (min-width: 1024px) {
    .admin {
      padding: 3rem; } }

.attendanceHeader {
  background: #007bff;
  display: flex;
  color: white;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100; }
  .attendanceHeader .attendanceTitle {
    font-size: 120%;
    padding: 1rem; }
  .attendanceHeader .attendanceHelp, .attendanceHeader .attendanceRecords {
    color: #cccccc;
    padding: 1rem;
    cursor: pointer; }
  .attendanceHeader .attendanceRecords {
    margin-left: auto; }
  .attendanceHeader .attendanceHelp.pressed, .attendanceHeader .attendanceRecords.pressed {
    color: white; }

.attendancePage {
  padding: 1rem; }
  @media (min-width: 768px) {
    .attendancePage {
      padding: 2rem; } }
  @media (min-width: 1024px) {
    .attendancePage {
      padding: 3rem; } }
  .attendancePage .warning {
    position: absolute;
    background: yellow;
    padding: 0.5em;
    width: 80vw;
    left: 10vw;
    color: red;
    font-weight: bold;
    border-radius: 0.5em;
    top: 50vh; }
  .attendancePage .warning.hidden {
    display: none; }
  .attendancePage .checkLocation {
    position: absolute;
    width: 100%;
    left: 0;
    top: 30vh;
    text-align: center; }
  .attendancePage .time {
    font-family: monospace;
    font-weight: bold;
    font-size: 250%;
    position: absolute;
    top: 50vh;
    width: 100%;
    left: 0;
    text-align: center; }
  .attendancePage .attendanceButton {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 70vh;
    left: 0; }
    .attendancePage .attendanceButton .btn {
      font-size: 150%; }

#attendanceHelpWindow, #attendanceRecordsWindow {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 60px;
  width: 100vw;
  height: calc(100vh - 60px);
  background: #d1ecf1;
  border-radius: 0 0 1em 1em;
  padding: 0 0.5em 0.5em 0.5em;
  box-sizing: border-box;
  transition: top 0.5s;
  z-index: 90; }
  #attendanceHelpWindow .content, #attendanceRecordsWindow .content {
    height: 100%;
    width: 100%;
    background: white;
    overflow-y: auto;
    padding: 0.5em;
    box-sizing: border-box; }
  #attendanceHelpWindow .windowRow, #attendanceRecordsWindow .windowRow {
    width: 100%;
    margin-top: 0.5em;
    display: flex;
    justify-content: center; }

#attendanceHelpWindow.closed, #attendanceRecordsWindow.closed {
  top: -100vh !important; }