/* Legacy CSS Bundle - will be migrated to Tailwind */

/* reset.css */
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.3
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

/* tablesorter.css */
/* tables */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	/*margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;*/
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	/*font-size: 8pt;*/
	padding: 4px;
        padding-right:15px;
}
table.tablesorter thead tr .header {
	background-image: url(/assets/bg-9d9d54644c7b40b4c2bcb62db3e967a4fea92d5fbb35d4564111ef99aad44b9f.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(/assets/asc-f79a1e432c73561b199307721fb9d3a7f607e1019bbfee72c783c57b8b2d9d85.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(/assets/desc-dff0c122869c48afc3e6de0ad69595c598478375eba79c457a40f29407969340.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}


/* namegame.css.scss */
.name-game-btn {
  margin: auto;
  transition: all 0.2s ease;
}
.name-game-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.name-game-btn:active {
  transform: translateY(0);
}

.modal-overlay {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.3s ease;
}
.modal-overlay.show {
  display: block;
}
@media (prefers-reduced-motion) {
  .modal-overlay {
    animation: none;
  }
}

.name-game {
  margin: 10% auto;
  width: 90%;
  max-width: 900px;
  min-height: 150px;
  opacity: 1;
  background-color: white;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
  animation-name: namegameopen;
  animation-duration: 0.8s;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .name-game {
    width: 95%;
    margin: 30% auto;
  }
}
@media (prefers-reduced-motion) {
  .name-game {
    animation: none;
  }
}

.name-game-header {
  background: linear-gradient(135deg, #002b61 0%, #003d7a 100%);
  padding: 20px 30px;
  margin: 0px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.name-game-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  flex: 1;
}

.name-game-cards {
  flex: 1;
  min-height: 300px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background-color: #fafafa;
}
@media (max-width: 768px) {
  .name-game-cards {
    min-height: 250px;
  }
}

.name-game-card {
  display: none;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 20px;
  opacity: 1;
  background-color: white;
  padding: 20px;
  height: 300px;
  border-bottom: 1px solid #e5e7eb;
}
.name-game-card.active {
  display: flex;
}
@media (max-width: 768px) {
  .name-game-card {
    flex-direction: column;
    height: auto;
    align-items: center;
    gap: 15px;
  }
}
.name-game-card img {
  border-radius: 8px;
  object-fit: cover;
}

.name-game-card > div {
  width: 250px;
}

.name-game-name {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  animation-name: namegameopen;
  animation-duration: 2s;
}

.name-game-close {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0;
  line-height: 1;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.name-game-close:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}
.name-game-close:focus {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}
.name-game-close:active {
  transform: scale(0.95);
}

.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.name-game-mark-confidence {
  padding: 8px 16px;
  margin: 4px 4px;
  background-color: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  color: #374151;
}
.name-game-mark-confidence:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
}
.name-game-mark-confidence:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.name-game-mark-confidence:active {
  transform: scale(0.98);
}
.name-game-mark-confidence.selected {
  background-color: #2563eb;
  color: white;
  border-color: #1d4ed8;
}

.name-game-next-card {
  padding: 8px 16px;
  margin: 4px 4px;
  background-color: #002b61;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.name-game-next-card:hover:not(:disabled) {
  background-color: #003d7a;
  box-shadow: 0 2px 8px rgba(0, 43, 97, 0.3);
}
.name-game-next-card:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.name-game-next-card:active:not(:disabled) {
  transform: scale(0.98);
}
.name-game-next-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.play-button {
  background: none;
  border: none;
  color: white;
  font-size: 48px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.play-button:hover {
  transform: scale(1.2);
}
.play-button:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
}

@keyframes namegameopen {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* four11.css */
html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
}
a {
  color: #2563eb; /* was #4072ff (4.14:1); 5.17:1 meets WCAG AA */
}
ul, ol {
  line-height:18px;
}
h5 {
  margin-top: 5px;
  margin-left: 10px;
}
.mdl-tooltip {
  max-width:350px;
}
.mdl-tooltip.is-active {animation:none; transform: scale(1); opacity: 1; visibility:visible;}
.student-cards {
  line-height:6px;
}
.four11-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.four11-layout .four11-header .mdl-textfield {
  padding: 0px;
  margin-top: 41px;
}
span.important {
  color:red;
}
.four11-layout .four11-header .mdl-textfield .mdl-textfield__expandable-holder {
  bottom: 19px;
}
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header {
  margin-left: 210px;
  width: calc(100% - 210px);
}

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__content {
  margin-left: 210px;
}
.mdl-layout__drawer {
  width: 210px;
}
.mdl-card__title-text > .material-icons {
  padding-right:10px;
  font-size: 28px;
  
}
#student-cards .mdl-card__title-text {
  padding-right:10px;
  font-size: 18px;
  font-weight: 500;
}
.four11-layout .mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}

#section-attendance.mdl-data-table {
    border:none;
}

.mdl-layout__drawer .avatar {
  margin-bottom: 16px;
}
.four11-drawer {
  border: none;
}
/* iOS Safari specific workaround */
.four11-drawer .mdl-menu__container {
  z-index: -1;
}
.four11-drawer .four11-navigation {
  z-index: -2;
}
/* END iOS Safari specific workaround */
.four11-drawer .mdl-menu .mdl-menu__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.four11-drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 16px;
  min-height: 120px;
}
.four11-avatar-dropdown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.four11-navigation {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
  padding: 2px 2px 2px 25px;
  
}
.four11-layout .four11-navigation .mdl-navigation__link {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.four11-layout .four11-navigation .mdl-navigation__link:hover {
  background-color: #ffc107;
  color: #37474F;
}
.four11-navigation .mdl-navigation__link .material-icons {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 16px;
}

.four11-content {
  max-width: 1600px;
}

.four11-charts {
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center;
}

.four11-cards {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
              -ms-grid-row-align: flex-start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}
.four11-cards .four11-separator {
  height: 32px;
}

.four11-cards .mdl-card__title.mdl-card__title-text {
  color: grey;
  font-size: 24px;
  font-weight: 400;
}
.section-card .mdl-card__title {
  padding:12px;
  padding-bottom: 4px;
  text-align:left;
  
}
.section-card .mdl-card__title-text {
  font-size: 20px;
  padding: 0px;
}
.section-card .mdl-card__supporting-text {
  padding:0px;
  text-align:center;
  margin:auto;
}
#section-attendance .mdl-textfield {
  padding:0px;
}
#section-attendance label.mdl-textfield__label {
  top:6px
}
#section-attendance label.mdl-textfield__label::after {
  bottom:4px;
}
/* The free-periods table still uses this id. */
table#accommodation-table th{
    padding:0px;
}
table#accommodation-table {
    border:none;
}
table#accommodation-table tbody tr{
    height:30px;
}
table#accommodation-table td{
    border-right:solid grey 1px;
    padding:0px;
    text-align:center;
}
/* The Support tab's grids (directory/_accommodations_grid: learning
   accommodations, GE allergies, dietary preferences): small dark labels
   on the same baseline as "Student", each rotated label sitting in the
   diagonal band above its own column, with its guide line continuing
   that column's right border. Some rules restate a value only to beat
   a more specific .mdl-data-table rule. The generic th.rotate below
   still serves the rigor, frequency and kelly_test grids. */
table.accommodations-grid {
  border: none;
  margin-bottom: 16px;
}
table.accommodations-grid tbody tr {
  height: 30px;
}
table.accommodations-grid td,
table.accommodations-grid td:first-of-type {
  border-right: solid grey 1px;
  padding: 0;
  text-align: center;
}
/* .mdl-data-table pads the last cell 24px with !important, which pushed
   the last column's mark against its left border. */
table.accommodations-grid td:last-of-type {
  padding-right: 0 !important;
}
table.accommodations-grid thead th {
  padding: 0;
  vertical-align: bottom;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #374151;
}
table.accommodations-grid thead th:first-child {
  padding: 0 12px 6px 0;
  text-align: left;
}
table.accommodations-grid th.rotate {
  /* The height (room for the longest label once rotated) is set inline
     from AccommodationGridHelper#rotated_header_height. */
  min-width: 32px;
  padding: 0;
}
table.accommodations-grid th.rotate > div {
  /* A zero-height pivot on the column's bottom-right corner, so the
     label's underline runs on from the column's right border. */
  position: relative;
  width: 100%;
  height: 0;
  transform: translateX(100%) rotate(-45deg);
  transform-origin: bottom left;
}
table.accommodations-grid th.rotate > div > span {
  /* Absolute, so a long label doesn't widen its column. */
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0 3px 6px;
  border-bottom: 1px solid #d1d5db;
}
/* A Guided Study Hall teacher, or an "Other" allergy's typed text,
   holds words rather than an X. */
table.accommodations-grid td.gsh-teacher {
  padding: 0 8px;
}
table.accommodations-grid td.text {
  padding: 2px 8px;
  text-align: left;
  white-space: normal;
  min-width: 140px;
  max-width: 260px;
}
/* Life-threatening: red so it can't be mistaken for an ordinary tick. */
table.accommodations-grid .lta {
  color: #b91c1c;
  font-weight: 700;
}
th.rotate {
  /* Something you can count on. Transform never affects an ancestor's
     layout size, so this explicit height is the ONLY thing giving a
     rotated label room to swing - it must clear the longest label's
     un-rotated width * sin(45deg). Longest one seen so far ("Computer /
     Assistive Technology for Tests") needs ~212px; this leaves margin. */
  height: 260px;
  white-space: nowrap;
  text-align: left;
  /* Anchors the rotated div (and its rotation pivot, see below) at the
     bottom of the cell, right above the column it labels. */
  vertical-align: bottom;
}

th.rotate > div {
  transform:
    /* Magic Numbers */
    translate(17px, -6px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  /* Without this, rotation pivots on the div's own center. A long label
     overflows this 30px-wide div well past its right edge (nowrap), and
     rotating that overflow around a center pivot swings it UP past the
     cell's own height, past the table's top edge entirely. Pivoting at
     bottom-left instead keeps the whole swing inside the 180px cell,
     however long the label. */
  transform-origin: bottom left;
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;
}
div#section-freq {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
div#section-freq mdl-card{
  min-height:40px;
}
#section-freq .mdl-card__title-text {
  overflow:visible;
  }
.four11-cards ul {
  padding: 0;
}
.four11-cards h3 {
  font-size: 1em;
}
.four11-updates .mdl-card__title {
  min-height: 60px;
}
.four11-cards .mdl-card__actions a {
  color: #00838f;
  text-decoration: none;
}

.four11-options h3 {
  margin: 0;
}
.four11-options .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 0.89);
}
.four11-options ul {
  margin: 0;
  list-style-type: none;
}
.four11-options li {
  margin: 4px 0;
}
.four11-options .material-icons {
  color: rgba(255, 255, 255, 0.89);
}
.mdl-card {
  min-height:80px;
}
.four11-options .mdl-card__actions {
  height: 64px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.mdl-data-table tbody tr {
  height:40px;
}
.mdl-data-table td {
  padding:0px;
  padding-left:12px;
  height: 40px;
}
table#strengths-grid {}
table#strengths-grid thead {}
table#strengths-grid thead tr {}
table#strengths-grid thead tr th {text-align:center;border-right:solid grey 1px;padding:2px;padding-top:0px;}
table#strengths-grid tbody {}
table#strengths-grid tbody tr {
  height: 18px;
}
table#strengths-grid tbody tr td {
    text-align:center;
    padding:0px;
    min-width:12px;
    border-right:solid grey 1px;
    font-size:11px;
}

#strengths-grid.mdl-data-table td {
    height: 13px;
}
#strengths-grid td.move-icons {
  border-right:none;
  font-size:2px;
}
td.strength {
    background-color:red;
    color:white;
    font-weight:bold;
}
div#student-cards {
    display:flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.section-card.four11-graphs.mdl-shadow--2dp.mdl-color--white {
    height:138px;
}
table.schedule td{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
table.schedule .mdl-checkbox {
  padding-left:15px;
}
.section-card .mdl-card__title-text {
  height:45px;
  vertical-align:top;
}

.mdl-data-table th {
  text-align: left;
  font-size: 18px;
}

#free_table {
  /*overflow-x: scroll;
  max-width: 1300px;*/
}

.free.mdl-data-table td {
  max-width: 120px;
  /*width: 150px;*/
  text-align: left;
  overflow: hidden;
  padding: 0 6px;
}

.free.mdl-data-table td:first-child {
  border: 1px solid rgba(0,0,0,.12);
  text-align: left;
  padding-left: 0px;
  max-width: 160px;
}

.free.mdl-data-table td:first-child .material-icons {
  margin-right: 0px;
}

.free.mdl-data-table td .free {
  color: gold;
  background-color: rgb(255,215,64);
  padding: 0 40px;
}
.mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
    color: gold;
}

#old_four10 {
    padding: 10px;
    background-color: #ccc;
    color: black;
    margin-bottom: 10px;
}

.attendance_bar {
  margin-left: 3px;
}
.attendance_bar .mdl-progress {
  width: 110px;
  height: 6px;
}

.attendance_bar .mdl-progress>.progressbar {
  background-color: green;
}
.attendance_bar .mdl-progress>.bufferbar {
  background: darkorange;
}
.attendance_bar .mdl-progress>.auxbar {
  background: darkred !important;
  mask: none !important;
  -webkit-mask: none !important;
  -ms-mask: none !important;
  -o-mask: none !important;
  -ms-mask: none !important;
}
.mdl-data-table td:first-of-type {
    padding-left: 5px;
}
.directory {
  margin:10px auto;
}
.directory_title {
  text-align: center;
  font-size: 24px !important;
}
.free .material-icons {
  font-size: 14px;
  margin-right: 10px;
}
.stu_title {
  font-size: 18px !important;
  margin: 20px 0px 0px 0px; 
}
.stu_title:first-child {
  margin:0;
}
.mdl-tooltip.emailer {
  display: flex;
  flex-flow: row wrap;
  max-width: 270px;
}
.emailer_stu {
    margin-right: 10px;
    flex: 1 1 auto;
}

.emailer_stu .mdl-chip {
    max-width: 100px;
    overflow: hidden;
}
.grade.mdl-data-table td {
  /*max-width: 120px;
  width: 150px;*/
  text-align: left;
}

.grade.mdl-data-table td:first-child {
  border: 1px solid rgba(0,0,0,.12);
  text-align: left;
  padding: 10px;
}

.grade.mdl-data-table td:first-child .material-icons {
  margin-right: 0px;
}

.a-grade.mdl-data-table td {
  text-align: left;
}

.adv-card.mdl-card__title {
  background-color: lightgray;
}

.adv-card.mdl-card__title .mdl-card__title-text {
  height: 30px;
}

.advising.mdl-card__supporting-text {
  padding-bottom: 10px;
  text-align: left;
}

.advising .mdl-grid {
  padding: 0px;
}

.advising .mdl-cell {
  margin: 0px;
}

.advising .material-icons {
  vertical-align: middle;
  line-height: 18px;
  font-size: 14px;
}

.mdl-tabs__panel {
  overflow-x: auto;
}

/* directory.css */
/*
  COLOR PALETE
  EPS blue #003e74  #002b61
  EPS gold #edac00 #f0b300
  green  #a2ad00
  orange #eb7125
  yellow #ffda00
  gray #9da299
  periwinkle #7a6691
  skyblue #93c3df
  brown #a45d0e
*/

form {
  display: block;
  width: 100%;
}

.tab-panel {
  display: none;
  padding: 20px;
}

/* overflow is NOT set here: application.tailwind.css's `.tab-panel { overflow:
   auto; max-height: calc(100vh - 14rem); }` needs to win so an overflowing
   panel scrolls internally instead of spilling into whatever follows it on
   the page. A `.tab-panel.active-panel { overflow: visible }` rule here would
   out-specify that single-class rule and silently break it. */
.tab-panel.active-panel {
  display: block;
}

.tab-button {
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Tab styling is now handled by Tailwind classes in the helper */

#strengths-grid {
  display: block !important;
  width: 100% !important;
  margin-top: 20px;
  font-size: 16px;
}

#strengths-grid h2 {
  display: block !important;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
  height: auto;
}

.student-strength {
  display: block !important;
  width: 100% !important;
  padding: 15px;
  border-bottom: 1px solid #e5e7eb;
  background-color: #ffffff;
  box-sizing: border-box;
  height: auto;
  font-size: 16px;
  line-height: 1.5;
}

.student-strength strong {
  display: block !important;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
  line-height: 1.4;
  font-size: 16px;
  height: auto;
}

.student-strength div {
  display: block !important;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  height: auto;
}
#section_freq{
 display:inline-block;
 vertical-align:top;
 min-width:180px;
 max-width:250px;
 margin:20px;
 margin-top:4px;
 text-align:left; 
}
#section_freq h2{
 margin-top:0px;
 padding-bottom:10px;
 text-align:center;
}
#section_freq li {
  border-bottom:1px dashed blue;
  padding:2px;
  margin-left:20px;
}
#section_freq li a.counter {
 text-decoration:none;
 display:inline-block;
 margin-left:-26px;
 border:1px solid blue;
 border-radius:2px;
 padding:2px;
 width:16px;
 text-align:center;
 font-weight:bold; 
} 
#section_freq li a span.tooltip {
  margin-top:0px;
  margin-left:-5px;
  text-align:left;
  font-weight:normal;
}
#section_freq li a span.tooltip li {
 border:none; 
}
textarea#user_emails,textarea#parent_emails {
  width: 300px;
  height: 150px;
}
textarea#parent_emails {
  height: 300px;
}
span.emailbox span{
  display:block;
  padding-bottom:2px;
}

/* The attendance P/T/A/R button styling that used to live here (a chunky
 * 56x44 redesign) conflicted with the MDL parity rules in
 * application.tailwind.css: its min-height leaked through and stretched the
 * buttons. MDL's own values now live in the parity layer as the single
 * definition. */

/* Tooltip styling for attendance history */
.attendance-tooltip {
  position: relative;
  display: inline-block;
}

.attendance-tooltip .tooltip-text {
  visibility: hidden;
  width: 250px;
  background-color: #1f2937;
  color: #f9fafb;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -125px;
  opacity: 0;
  transition: opacity 0.3s;
  border: 1px solid #374151;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.attendance-tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

.attendance-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Stat bar styling */
.attendance-bar {
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
  position: relative;
}

.attendance-bar-fill {
  height: 100%;
  display: flex;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.attendance-bar-present {
  background-color: #22c55e;
}

.attendance-bar-tardy {
  background-color: #ffda00;
}

.attendance-bar-absent {
  background-color: #ef4444;
}

/* rounded_sliders.css.scss */
/* Rounded sliders */
.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

/* The input itself is invisible, so the track carries the focus ring. */
input:focus-visible + .slider {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

input:disabled + .slider {
  opacity: 0.4;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.form-reveal.closed {
  opacity: 0;
  height: 5px;
  overflow: hidden;
  /* Without this, collapsed questions stay in the tab order and are read
     aloud even though they are invisible. Inputs still submit. */
  visibility: hidden;
}

.form-reveal {
  transition-property: opacity, visibility;
  transition-duration: 0.8s;
  transition-timing-function: linear;
  transition-delay: 0.1s;
  overflow: clip;
  opacity: 1;
}

form h6 {
  margin: 15px 0px 0px 0px;
}