body {
  background: rgb(241, 241, 241);
  font-family: arial,sans-serif;
  font-size: 14px;
  max-width: 1280px;
  overflow-x: scroll;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

body.admin {
  max-width: 1440px;
  overflow-x: auto;  
}

.padded-element {
  padding: 16px;
}

.h-padded-element {
  padding: 4px 16px;
}

.app-bar {
  background-color: #860200;
  color: white;
  height: 40px;
  width: 100%;
  font-size: 80%;
}

a.app-bar-link {
  color: white;
  padding-right: 4px;
}

div.page-container {
  background: transparent;
  width: 1136px;
}

div.login-page {
  background: transparent;
  width: 400px;  
}

setup-tasks,
tasks {
  padding-top: 40px;
}

.tasks-container {
  width: 252px;
}

.white {
  background: white;  
}

.vmargin {
  margin: 16px 0;
}

.section {
  background: white;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  margin: 16px;
  overflow: auto;
}

.css-table {
  display: table;
}

.order-details-header,
table.odd-even tr:nth-child(odd),
.css-table.odd-even > div:nth-child(odd) {
  background-color: #CCC;
}

.css-table-row {
  display: table-row;
  padding: 4px 0;
}

.css-table-row.admin {
  background-color: #860200 !important;
}

.css-table-row.selected {
  background-color: blue !important;
}

.header {
  background-color: gray !important;
  color: white;
}

.css-table > .header {
  height: 40px;
}

.css-table-cell {
  display: table-cell;
  padding: 4px 8px;
}

.left {
  float: left;
}

.right {
  float: right;  
}

.left-line {
  border-left: 1px solid;  
}

.section-header {
  height: 30px;  
}

.count-input {
  width: 80px;
}

input {
  font-size: 80%;  
}

input[type="button"]:enabled,
input[type="submit"]:enabled {
  color: blue;
}

.hidden {
  display: none;
}

.login-form {
  width: 400px;
}

.register-form input.css-table-cell,
.login-form input.css-table-cell {
  width: 200px;
  margin: 4px 0;
}

.register-form table {
  width: 100%;
}

.register-grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

@media (pointer:none), (pointer:coarse) {
  .register-grid {
    font-size: 200%;
    grid-template-columns: 400px;
    margin: auto;
  }

  .register-form .css-table-cell > * {
    font-size: 200%;
  }

  .register-form input[type="submit"],
  .register-form input[type="checkbox"] {
    transform: scale(3);
  }
}


.vacation {
  background-color: #860200 !important;
  color: white;
  cursor: pointer;
}

.clickable,
.selectable {
  cursor: pointer;
}

.selectable:hover {
  background-color: lightcyan;
}

.selected {
  background-color: gray;
  color: white;
}

.schedule-tasks {
  background: white;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  min-width: 800px;
}

hr {
  width: 100%;
}

.user-info {
  background: white;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  margin: 16px;
  width: 400px;
}

.user-score-editor,
.user-info-editor {
  background: white;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  margin: 16px;
  padding: 16px;
  width: 300px;
}

.user-container {
  flex-wrap: wrap;
}

select#state {
  width: 140px;
}

.separator {
  border-right: 1px solid white;
  display: inline;
  height: 10px;  
  margin: 0 4px;
}

.inline {
  display: inline-block;
}

.name-field {
  display: block;
  width: 60px;
}

.compact-name-field {
  max-width: 50px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-groups {
  height: 1000px;
  overflow: scroll;
  width: 1000px;
}

.learning-groups .name-field {
  background: gray;
  left: 0;
  position: sticky;
  z-index: 2;
}

classes {
  align-self: stretch;
  background: white;
  height: 100%;
}

.class-name.selected {
  margin: 0 -16px;
}

.right-panel {
  width: 1000px;
}

paper-tabs {
  width: 1000px;
}

.flex {
  display: flex;
}

.flex.center-align {
  align-items: center;
}

.center-align {
  text-align: center;
}

.task {
  background: white;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  padding-bottom: 16px;
}

iron-icon.small-icon {
  width: 16px;
  height: 16px;
}

.class-list {
  width: 200px;
}

.import-analysis {
  max-height: 300px;
  overflow: scroll;
  padding: 16px;
  max-width: 1280px;
}

.preview-section {
  max-height: 500px;
  overflow: scroll;
  padding: 16px;
  max-width: 1280px;
}

paper-dialog {
  overflow: auto;
  padding: 16px;
}

paper-dialog#analysis,
paper-dialog#preview {
  height: 800px;
  width: 1280px;
}

.css-table-cell.compact {
  max-width: 150px;
  overflow: hidden; 
  padding: 0 2px;
  text-overflow: ellipsis;
}

.item-name {
  width: 300px;
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diff-modified {
  background: red;
}

.audited,
.diff-added {
  background: green;
}

.preview-progress {
  width: 1100px;
}

.legend {
  width: 100px;
  padding: 0 16px;
}

.old-data {
  text-decoration: line-through;  
}

paper-dialog > * {
  margin-top: 0;  
}

iron-icon[icon="icons:done"] {
  color: green;
}

iron-icon[icon="icons:error"] {
  color: red;
}

paper-progress.task-progress {
  width: 100%;
}

div.task-stats {
  background: white;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  margin-left: 16px;
  width: 920px;
}

.task-stats > .progress-bar-container {
  background: transparent;
  width: 500px;
}

.progress-bar-container {
  background: #e0e0e0;
  height: 4px;
  overflow: hidden;
  width: 100%;
}

.progress-bar {
  background: #0f9d58;
  height: 100%;
}

.group-editing {
  width: 600px;
}

paper-dialog#course-editor-dlg {
  width: 800px;
}

paper-dialog#create-course-dialog {
  width: 400px;
}

.course-groups {
  height: 500px;
  overflow-y: auto;
  width: 200px;
}

.course-category {
  padding: 8px 0;
}

.course-category-selection {
	padding-top: 16px;
}
.course-editor-content {
  display: flex;
  height: 500px;
}

.expandable.expanded {
	transform: rotate(90deg);
}

.course-right-panel {
  border-left: solid 1px;
  height: 460px;
  margin-left: 32px;
  overflow-y: auto;
}

.course-list {
	padding-top: 32px;
  text-align: right;
}

.course-name {
  width: 320px;
}

.class-editor {
  width: 500px;
  flex-wrap: wrap;
}

.error {
  color: red;
}

.users {
  position: relative;  
}

.users .css-table {
  height: 100%;
}

.comments {
  max-width: 50px;
}

.email {
  max-width: 160px;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.compact-user {
  max-width: 400px;  
}

.required-asterisk {
  color: red;
}

.register-back {
  background-image: url("images/background.png");
  padding-top: 48px;
}

.register-form {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
  font-size: 94%;
  margin-top: -2px;  
}


.register-type-chooser,
.register-form form {
  background-color: rgba(255, 255, 255, .7);
  border-radius: 0 0 4px 4px;
}

.register-type-chooser {
  margin-top: -16px;
}

.register-entry {
  background-size: cover;
  display: block;
  height: 230px;
  width: 230px;
}

.flex.justify-align {
  justify-content: center;
}

.bodhi-class {
  background-image: url("images/bodhi_class.png");
}

.bodhi-class:hover {
  background-image: url("images/bodhi_class_hover.png");
}

.bodhi-merit {
  background-image: url("images/bodhi_merit.png");
}

.bodhi-merit:hover {
  background-image: url("images/bodhi_merit_hover.png");
}

.register-form .css-table-cell {
  padding: 0px 8px;
}

.register-form fieldset {
  border: none;
}

.register-form select,
.register-form textarea,
.register-form input {
  border-color: gray;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
}

.register-form .place-holder {
  width: 24px;
}

.register-form .vertical-place-holder {
  height: 48px;
  vertical-align: middle;
}

.section-index {
  background-color: #982838;
  border-radius: 15px;
  color: #eec94d;
  display: table-cell;
  font-size: 110%;
  font-weight: bold;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  width: 30px;
}

.section-title {
  color: #982838;
  font-size: 150%;
  height: 64px;
}

.outer-us {
  color: white;
  left: 100px;
  top: 270px;
  position: absolute;
}

.outer-us > a {
  color: #eec94d;
}

paper-dialog#new-user-dlg {
  max-height: 650px;
}

.check-complete {
  text-align: right;
}

.completed-task {
  background: lightgray;
}

.task-bar-container {
  height: 40px;
  position: relative;
  width: 60px;
}

.task-bar {
  background: green;
  border-radius: 3px 3px 0 0;
  bottom: 0;
  max-height: 36px;
  position: absolute;
  width: 80%;
}

.task-bar-title {
  bottom: 0;
  position: absolute;
}

.in-progress {
  cursor: wait;
}

.table-title {
  padding: 0 32px;
}

.learning-record-cell {
  vertical-align: middle;
}

.wide-schedule-table {
  width: 940px;
}

address-filter {
 max-width: 280px;
}

.indented {
  padding-left: 16px;  
}

google-chart {
  width: 700px;
}

.report-week {
  background-color: green !important;
  color: white;  
  position: relative;
}

.report-alert {
  padding: 2px 16px;
  position: absolute;
}

.bio {
  max-width: 200px;
}

.item-image-container {
  height: 160px;
  overflow: hidden;
  width: 100px;
}

.item-image-container .item-image {
  position: absolute;
  width: 100px;
}

.item-image.small {
  height: 100px;
}

body.white {
  background: white;
}

.yellow-button {
  background: #f0c14b;
  border-radius: 3px;
  border: 1px solid;
  cursor: pointer;
  padding: 4px;
}

.shopping-cart {
  color: blue;
  cursor: pointer;
  position: relative;
}

.cart-size {
  color: red;
  left: 25px;
  position: absolute;
  top: 5px;
}

.check-out-button {
  min-width: 100px;
  margin: 0 4px;
}

.right-align {
  text-align: right;
}

.shopping-cart-list .css-table-cell {
  vertical-align: top;
}

.elections > .css-table,
candidates .css-table,
election-attributes > .css-table,
.order-details-header.css-table,
.shopping-cart-list.css-table {
  width: 100%;
}

tr.deletable .delete-button,
.css-table-row.deletable .delete-button {
  visibility: hidden;
}

tr.deletable:hover .delete-button,
.css-table-row.deletable:hover .delete-button {
  cursor: pointer;
  visibility: visible;
}

.hover-icon-container {
  position: relative;
}

.hover-icons {
  align-items: center;
  display: flex;
  height: 100%;
  position: absolute;
  right: 32px;
  top: 0;
  visibility: hidden;
}

.css-table-row:hover .hover-icons {
  cursor: pointer;
  visibility: visible;
}

.bold {
  border: 2px solid;
}

search-bar,
.search-box,
.app-bar-left,
.split-cell,
.invoice-address {
  flex-grow: 1;
}

search-bar {
  align-items: center;
  display: flex;
}

.invoice-page {
  width: 600px;
}

.invoice-table {
  width: 100%;
}

.order-details-line.section {
  width: 800px;
  margin: 16px auto;
}

.items.css-table {
  width: 800px;
}

.item-description {
  width: 360px;
}

.item-category {
  width: 100px;
}

.top-border {
  border-top: 1px solid;
}

.int-shipping {
  padding-bottom: 16px;
}

.book-name {
  max-width: 400px;
}

.busy {
  cursor: wait;
}

.book-selection {
  height: 100%;
  width: 200px;
}

.class-book-list {
  width: 560px;
}

iron-icon.add-icon {
  color: blue;
  height: 48px;
  padding: 16px;
  width: 48px;
}

.register-form input.register-button {
  background-color: #972937;
  border-radius: 4px;
  color: #eec94d;
  cursor: pointer;
  font-size: 200%;
  height: 36px;
  margin: 48px;
  width: 148px;
}

.copy-right {
  color: white;
  font-size: 120%;
  padding: 32px;
  text-align: center;
}

.merit-body {
  background-image: url("images/body_bg.jpg");
  width: 640px;
}

.add-course-button {
	left: 230px;
  position: absolute;
  top: 30px;
}

.append-course-icon {
  cursor: pointer;
  position: absolute;
  right: 64px;
}

.address-column {
  width: 300px;
}

paper-dialog#email-dialog {
  height: 580px;
  width: 660px;
}

.email-subject {
  width: 100%;;
}

.email-body {
  border: inset 1px;
  height: 340px;
  width: 100%;
}

.email-chip {
  border-style: solid;
  border-width: 1px;
  border-radius: 14px;
  display: inline-block;
  height: 24px;
  margin: 4px;
  padding: 2px;
}

.delete-group-icon,
.email-chip > iron-icon {
  color: gray;
}

.delete-group-icon {
  cursor: pointer;
}

payment {
  position: absolute;
  background: white;
  border: 1px solid;
  border-radius: 4px;
  z-index: 1;
}

payment.in-shopping-cart {
  border: none;
  display: block;
  margin: 50px 300px;
  position: relative;
}

.popup-menu {
  background: white;
  box-shadow: 1px 1px 1px gray;
  position: absolute;
  right: 0;
  z-index: 2;
}

.menu-item {
  padding: 4px 8px;
}

.backdrop {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

election-list {
  background: white;
  position: relative;
  width: 250px;
}

election-list.collapsed {
  width: 20px;
}

election-list .css-table-cell {
  padding: 8px 16px;
}

.full-page {
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  top: 48px;
}

body.vote {
  max-width: none;
}

candidates {
  height: 100%;
  left: 250px;
  padding: 16px;
  overflow: auto;
  position: absolute;
  right: 392px;
}

candidates.expanded {
  right: 20px;
}

candidates.left-expanded {
  left: 20px;
}

election-attributes {
  background: white;
  height: 100%;
  padding: 16px;
  position: absolute;
  right: 0;
  width: 360px;
}

election-attributes.collapsed {
  padding: 0;
  width: 20px;
}

election-attributes > .buttons {
  text-align: right;
}

candidates .add-icon {
  left: 210px;
  position: fixed;
  top: 32px;
}

paper-button.primary-action {
  color: blue;
}

paper-button[disabled].primary-action {
  color: gray;
}

.attribute-value > input {
  width: 100%;
}

[disabled] .clickable {
  cursor: auto;
}

.actions {
  position: relative;
}

.vote-actions {
  position: relative;
}

.vote-actions paper-button {
  align-items: center;
  background-color: white;
  color: blue;
  display: flex;
  padding: 0 4px;
}

body.vote {
  background-color: whitesmoke;
}

.vote-actions img {
  height: 36px;
  width: 36px;
}

.voted {
  color: green;
  position: absolute;
  right: 0;
  top: 0;
}

candidates .popup-menu {
  right: 0;
}

candidates.in-dialog {
  left: auto;
  position: relative;
  right: auto;
  width: 600px;
}

#vote-mail-dialog {
  height: 768px;
  width: 1024px;
}

.districts {
  width: 120px;
}

.email-chips {
  max-width: 600px;
}

.vote-mail-container {
  padding: 16px;
  width: 800px;
}

#vote-mail-body {
  height: 500px;
  overflow-y: auto;
}

#create-election-dialog {
  width: 400px;
}

.collapse-button {
  background-color: lightgray;
  border-radius: 16px;
  position: absolute;
  top: 200px;
}

election-attributes .collapse-button {
  left: -10px;
}

election-list .collapse-button {
  right: -10px;
}

.remaining {
  font-size: 200%;
}

.schedule-notes,
.user-label {
  display: block;
  width: 90px;
}

[class-label] {
  background-color: inherit;
  border-style: none;
}

#confirm-graduate {
  height: 600px;
  width: 1024px;
}

.welcome-header {
  background-image: url(images/welcome_home.jpg);
  height: 300px;
  background-size: 100% 100%;
}