body {
  font-family: arial, helvetica, sans-serif;
}

.smalltext {
  font-family: arial narrow, arial, helvetica, sans-serif;
  font-size: 14px;
}

.readabletext {
  font-family: Georgia, Times New Roman, Times, serif;
  font-size: 12px;
}

.footer {
  color: #999;
  font-size: 10px;
}

.redborder {
  border: 3px #ff0000 solid;
}

.bluecell {
  border: 1px #000099 solid;
  padding: 3px;
}

h3,
.sectionheader {
  font: 100% arial, helvetica;
  font-weight: bold;
}

.gridnone,
.gridl,
.gridlb,
.gridlbr,
.gridlt,
.gridltr,
.gridlr,
.gridtr,
.gridbr,
.gridr,
.gridb,
.gridt,
.gridtb,
.gridltb,
.gridtrb,
.gridall,
.gridfilled {
  border-style: none;
  padding: 2px;
  font-size: 75%;
  white-space: nowrap;
}

.gridl,
.gridlr,
.gridlt,
.gridltr,
.gridlb,
.gridlbr,
.gridltb,
.gridall,
.gridfilled {
  border-left: 1px solid #009;
}

.gridr,
.gridlr,
.gridltr,
.gridbr,
.gridtr,
.gridlbr,
.gridtrb,
.gridall,
.gridfilled {
  border-right: 1px solid #009;
}

.gridt,
.gridlt,
.gridltr,
.gridtr,
.gridtb,
.gridltb,
.gridtrb,
.gridall,
.gridfilled {
  border-top: 1px solid #009;
}

.gridb,
.gridlb,
.gridlbr,
.gridbr,
.gridtb,
.gridltb,
.gridtrb,
.gridall,
.gridfilled {
  border-bottom: 1px solid #009;
}

.gridfilled {
  background-color: #59d;
}

.excused-e,
.bluerow {
  color: #009;
}

.excused-u,
.redrow {
  color: #f00;
}

.excused-p {
  color: #39d;
}

.scrollTable th {
  background-color: #f0f0ff;
}

select,
.form-dropdown,
.form-textfield,
.indent-text,
.blueboxoff,
.blueboxon,
.redboxoff,
.redboxon,
.greenboxoff,
.greenboxon,
.purpleboxon,
.purpleboxoff,
.grayboxoff,
.grayboxon {
  margin-left: 1.5em;
  margin-right: 0em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  font: 80% arial, helvetica;
}

select {
  background-color: #fff0ff;
  color: purple;
  border: 1px solid purple;
}

.form-textfield {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0;
  padding: 6px;

  margin-left: 1.5em;
  margin-right: 0em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  font: 100% arial, helvetica;
}

.blueboxoff,
.blueboxon,
.redboxoff,
.redboxon,
.greenboxoff,
.greenboxon,
.purpleboxon,
.purpleboxoff,
.grayboxoff,
.grayboxon {
  width: 14em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  border-style: solid;
  border-width: 2px;
  padding: 0px;
}

.blueboxoff,
.redboxoff,
.greenboxoff,
.purpleboxoff {
  background-color: white;
  color: blue;
}

.grayboxoff {
  background-color: white;
  color: #ddd;
}

.blueboxon,
.redboxon,
.greenboxon,
.purpleboxon,
.grayboxon {
  color: white;
}

.blueboxoff {
  border-color: #f0f0ff #f0f0ff #0000cc #0000cc;
}

.blueboxon {
  border-color: #0000cc;
  background-color: #0000cc;
}

.redboxoff {
  border-color: #f0f0ff #f0f0ff #cc0000 #cc0000;
}

.redboxon {
  border-color: #cc0000;
  background-color: #cc0000;
}

.greenboxoff {
  border-color: #f0f0ff #f0f0ff #00cc00 #00cc00;
}

.greenboxon {
  border-color: #00cc00;
  background-color: #00cc00;
}

.purpleboxoff {
  border-color: #f0f0ff #f0f0ff #cc00cc #cc00cc;
}

.purpleboxon {
  border-color: #cc00cc;
  background-color: #cc00cc;
}

.grayboxoff {
  border-color: #f0f0ff #f0f0ff #ddd #ddd;
}

.grayboxon {
  border-color: #ddd;
  background-color: #ddd;
}

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
  display: none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabberlive {
  margin-top: 1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav {
  margin: 0;
  padding: 3px 0;
  border-bottom: 1px solid #778;
  font: bold 12px Verdana, Arial, sans-serif;
}

ul.tabbernav li {
  list-style: none;
  margin: 0;
  display: inline;
}

ul.tabbernav li a {
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #778;
  border-bottom: none;
  background: #bbe;
  text-decoration: none;
}

ul.tabbernav li a:link {
  color: #22d;
}
ul.tabbernav li a:visited {
  color: #667;
}

ul.tabbernav li a:hover {
  color: #000;
  background: #aae;
  border-color: #227;
}

ul.tabbernav li.tabberactive a {
  background-color: #f0f0ff;
  border-bottom: 1px solid #f0f0ff;
}

ul.tabbernav li.tabberactive a:hover {
  color: #f00;
  background: #f0f0ff;
  border-bottom: 1px solid #f0f0ff;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
  padding: 5px;
  border: 1px solid #aaa;
  border-top: 0;

  /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

  /* height:300px; */

  /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

  /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
  display: none;
}
.tabberlive .tabbertab h3 {
  display: none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab2 .tabbertab {
  height: 200px;
  overflow: auto;
}

.formbutton {
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #000000;
  background-color: #4eb5f1;
  text-align: center;
  transition: all 0.2s;
}

.formbutton:hover {
  background-color: #4095c6;
}

.form-select-label {
  font-size: large;
}

@media screen {
  .flex-container {
    display: flex;
    flex-flow: row wrap;
  }
  .flex-courseinfo {
    flex-basis: 600px;
    margin-right: 50px;
  }
  .flex-photo {
    margin: 10px;
    padding: 10px;
    width: 150px;
    background-color: white;
    text-align: center;
    font-size: 11px;
  }
}

@media print {
  .flex-container {
    display: flex;
    width: 1000px;
    flex-flow: row wrap;
  }
  .flex-courseinfo {
    width: 1000px;
  }
  .flex-photo {
    margin: 0px;
    padding: 10px;
    width: 150px;
    background-color: white;
    text-align: center;
    font-size: 11px;
  }
}

.classtable,
.coursetable,
.studytable,
.sizestable {
  border-spacing: 0px;
  border-collapse: collapse;
}

.coursetable {
  min-width: 800px;
}

.classtable td,
.classtable th {
  padding: 5px;
  border-bottom: 1px solid #009;
}

.coursetable td {
  padding: 3px 0px 0px 3px;
  border: 1px solid #009;
  white-space: nowrap;
  vertical-align: baseline;
  font-size: 0.75em;
}

.coursetable th,
.coursetable td input {
  font-size: 1em;
}

.sizestable th,
.sizestable td {
  padding: 5px;
  border: 1px solid #009;
}

.sizestable th.nrb {
  border-right: none;
}

.sizestable th.nlb {
  border-left: none;
}

.sizestable td.missing {
  background-color: #ffcccc;
}

.sizestable td {
  font-family: arial narrow, arial, helvetica, sans-serif;
  font-size: 14px;
}

.studytable {
  table-layout: fixed;
  width: 1200px;
}

.studytable td,
.studytable th {
  padding: 5px;
  border: 1px solid #009;
  text-align: center;
  vertical-align: top;
  font-size: 0.8em;
}

.studytable th {
  background-color: lightskyblue;
  font-size: 1em;
}

.studytable td.A {
  background-color: #d9d2e9;
}

.studytable td.B {
  background-color: #fce5cd;
}

.studytable td.C {
  background-color: #fff2cc;
}

.studytable td.D {
  background-color: #d9ead3;
}

.studytable td.E {
  background-color: #c9daf8;
}

.studytable td.F {
  background-color: #ead1dc;
}

.studytable td.G {
  background-color: #cfe2f3;
}

.spacedtable th,
.spacedtable td {
  padding-left: 5px;
  padding-right: 5px;
}

.tabler--check {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--clipboard-list {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2m0 7h.01M13 12h2m-6 4h.01M13 16h2'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--message-question {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m0 5h-1l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v4.5M19 22v.01M19 19a2.003 2.003 0 0 0 .914-3.782a1.98 1.98 0 0 0-2.414.483'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--ban {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m2.7-6.3l12.6 12.6'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--restore {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3.06 13a9 9 0 1 0 .49-4.087'/%3E%3Cpath d='M3 4.001v5h5M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--clock-cancel {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M20.997 12.25a9 9 0 1 0-8.718 8.745M16 19a3 3 0 1 0 6 0a3 3 0 1 0-6 0m1 2l4-4'/%3E%3Cpath d='M12 7v5l2 2'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--trash-x {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 7h16M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3m-5 5l4 4m0-4l-4 4'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--message-reply {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3Cpath d='m11 8l-3 3l3 3m5-3H8'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--edit {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1'/%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--spacer {
  display: inline-block;
  width: 2.5em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--notes {
  display: inline-block;
  width: 2em;
  height: 2em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tabler--notes-red {
  display: inline-block;
  width: 2em;
  height: 2em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E");
}

.message-green {
  display: inline-block;
  font-size: 1.5em;
  color: green;
  padding: 5px;
  border: 1px solid green;
  margin: 5px;
}

.message-red {
  display: inline-block;
  font-size: 1.5em;
  color: red;
  padding: 5px;
  border: 1px solid red;
  margin: 5px;
}