@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"), url(/static/fonts/MaterialSymbolsOutlined.woff2) format("woff2"), url(/static/fonts/MaterialSymbolsOutlined.ttf) format("truetype");
}
.material-icons, .material-icons-no-fill {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}
.material-icons-no-fill {
  font-variation-settings: "FILL" 0;
}

/* Rules for sizing the icon. */
.material-icons.md-18, .md-18.material-icons-no-fill {
  font-size: 18px;
}

.material-icons.md-24, .md-24.material-icons-no-fill {
  font-size: 24px;
}

.material-icons.md-36, .md-36.material-icons-no-fill {
  font-size: 36px;
}

.material-icons.md-48, .md-48.material-icons-no-fill {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark, .md-dark.material-icons-no-fill {
  color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive, .md-dark.md-inactive.material-icons-no-fill {
  color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light, .md-light.material-icons-no-fill {
  color: rgb(255, 255, 255);
}

.material-icons.md-light.md-inactive, .md-light.md-inactive.material-icons-no-fill {
  color: rgba(255, 255, 255, 0.3);
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), local("sans-serif-light"), url(/static/fonts/roboto-light.woff2) format("woff2"), url(/static/fonts/roboto-light.woff) format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), local("sans-serif"), url(/static/fonts/roboto-regular.woff2) format("woff2"), url(/static/fonts/roboto-regular.woff) format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium"), local("sans-serif-medium"), url(/static/fonts/roboto-medium.woff2) format("woff2"), url(/static/fonts/roboto-medium.woff) format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.hidden {
  display: none;
}

.tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Needed to fix firefox handling of scrolling flexbox items with overflow: auto|hidden|scroll */
  overflow: hidden;
}
.tabs .tabBar {
  height: 40px;
  background-color: #2C3E50;
  color: white;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.tabs .tabBar .tabLabels {
  display: flex;
}
.tabs .tabBar .tab {
  flex: 1;
  text-align: center;
  line-height: 40px;
  color: #a9b0be;
  font-weight: 500;
}
.tabs .tabBar .tab.selected {
  color: white;
}
.tabs .tabBar .selectedSlider {
  position: absolute;
  left: 0px;
  bottom: 0px;
  background-color: white;
  height: 3px;
  transition: transform 0.13s ease-out;
}
.tabs .header {
  flex: 0 0 auto;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.tabs .contentHolder {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  min-width: 0; /* Needed to fix firefox handling of scrolling flexbox items with overflow: auto|hidden|scroll */
  min-height: 0; /* Needed to fix firefox handling of scrolling flexbox items with overflow: auto|hidden|scroll */
}
.tabs .contentHolder .content {
  flex: 1;
  display: flex;
  transition: transform 0.13s ease-out;
  min-width: 0; /* Needed to fix firefox handling of scrolling flexbox items with overflow: auto|hidden|scroll */
  min-height: 0; /* Needed to fix firefox handling of scrolling flexbox items with overflow: auto|hidden|scroll */
  width: 100%;
}
.tabs .tabPage {
  min-width: 100%;
  /* needed so Firefox doesn't make img shrink to fit */
  width: 100%; /* can't take this out either as it breaks Chrome */
  height: 100%;
  overflow-y: auto;
  display: flex;
  min-height: 0; /* Needed to fix firefox handling of scrolling flexbox items with overflow: auto|hidden|scroll */
}

/* Disable transition animations when swiping. */
.tabs.swiping .content {
  transition: none;
}
.tabs.swiping .selectedSlider {
  transition: none;
}

.subjectSelectionMadeChoices {
  width: 100%;
  padding-bottom: 16px;
}
.subjectSelectionMadeChoices .icon {
  font-size: 32px;
  padding: 8px;
}
.subjectSelectionMadeChoices .miniIcon {
  font-size: 14px;
  color: #959EA7;
  padding: 2px;
}
.subjectSelectionMadeChoices .publicCommentContainer {
  display: none;
  width: 100%;
  background-color: #E1EAF8;
  position: fixed;
}
.subjectSelectionMadeChoices .publicComment {
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  align-self: center;
  margin: 16px 0;
  width: 100%;
  overflow-wrap: anywhere;
}
.subjectSelectionMadeChoices .foldOutButton, .subjectSelectionMadeChoices .foldInButton {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 8px 16px 8px 8px;
}
.subjectSelectionMadeChoices.publicCommentAvailable .publicCommentContainer {
  display: flex;
}
.subjectSelectionMadeChoices.publicCommentIsFoldedIn .foldOutButton {
  display: flex;
}
.subjectSelectionMadeChoices.publicCommentIsFoldedOut .publicComment {
  overflow: visible;
  -webkit-line-clamp: unset;
}
.subjectSelectionMadeChoices.publicCommentIsFoldedOut .foldInButton {
  display: flex;
}
.subjectSelectionMadeChoices .madeChoicesContainer, .subjectSelectionMadeChoices .conditionsContainer {
  max-width: 70%;
  margin: 24px auto auto;
  padding-bottom: 4px;
}
.subjectSelectionMadeChoices .lessonInvolvementInformation {
  margin-top: 32px;
}
.subjectSelectionMadeChoices .subjectText, .subjectSelectionMadeChoices .subjectTextItalic {
  color: #2C3E50;
  display: inline-block;
}
.subjectSelectionMadeChoices .subjectTextItalic {
  font-style: italic;
}
.subjectSelectionMadeChoices .chosenSubject {
  padding-left: 18px;
}
.subjectSelectionMadeChoices .segment {
  font-weight: bold;
  padding-bottom: 8px;
  width: 100%;
}
.subjectSelectionMadeChoices .segment:nth-child(n+2) {
  border-top: 2px solid #EAEEEF;
  margin-top: 16px;
  padding-top: 16px;
}
.subjectSelectionMadeChoices .subjectContainer {
  max-width: 70%;
  margin: auto;
}
.subjectSelectionMadeChoices .conditions {
  margin-top: 32px;
  display: flex;
}
.subjectSelectionMadeChoices .spacing {
  margin-bottom: 8px;
}
.subjectSelectionMadeChoices .errorIcon {
  margin-right: 8px;
  color: #2C3E50;
}
.subjectSelectionMadeChoices .errorIconRed {
  margin-right: 8px;
  color: #E24E4E;
}
.subjectSelectionMadeChoices .conditionWrong {
  color: #E24E4E;
}
.subjectSelectionMadeChoices .subjectSelectionWrongConditionsContainer {
  display: flex;
  max-height: 100px;
  width: 70%;
  overflow: auto;
  margin: 8px auto;
}
.subjectSelectionMadeChoices .bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: white;
  padding-top: 8px;
  padding-bottom: 16px;
}
.subjectSelectionMadeChoices .bottomButtons {
  justify-content: center;
  display: flex;
}
.subjectSelectionMadeChoices .buttonTrue {
  background-color: #2C3E50;
  border-radius: 2px;
  text-align: center;
  padding: 10px 5px 10px 5px;
  margin-right: 16px;
  margin-left: 16px;
  color: #FFFFFF;
  width: 35%;
  z-index: 10;
}
.subjectSelectionMadeChoices .buttonFalse {
  opacity: 30%;
}

.subjectSelectionChoiceWidget {
  width: 100%;
  padding-bottom: 16px;
}
.subjectSelectionChoiceWidget .publicCommentIcon {
  font-size: 32px;
  padding: 8px;
}
.subjectSelectionChoiceWidget .publicCommentContainer {
  display: none;
  width: 100%;
  background-color: #E1EAF8;
  position: fixed;
}
.subjectSelectionChoiceWidget .publicComment {
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  align-self: center;
  margin: 16px 0;
  width: 100%;
  overflow-wrap: anywhere;
}
.subjectSelectionChoiceWidget .foldOutButton, .subjectSelectionChoiceWidget .foldInButton {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 8px 16px 8px 8px;
}
.subjectSelectionChoiceWidget.publicCommentAvailable .publicCommentContainer {
  display: flex;
}
.subjectSelectionChoiceWidget.publicCommentIsFoldedIn .publicCommentContainer .foldOutButton {
  display: flex;
}
.subjectSelectionChoiceWidget.publicCommentIsFoldedOut .publicCommentContainer .publicComment {
  overflow: visible;
  -webkit-line-clamp: unset;
}
.subjectSelectionChoiceWidget.publicCommentIsFoldedOut .publicCommentContainer .foldInButton {
  display: flex;
}
.subjectSelectionChoiceWidget .choiceDescriptionContainer, .subjectSelectionChoiceWidget .alreadyChosenSubjectsCumulativeContainer {
  display: none;
  max-width: 70%;
  margin: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 25px;
}
.subjectSelectionChoiceWidget .choiceDescription, .subjectSelectionChoiceWidget .alreadyChosenSubjectsCumulative {
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.subjectSelectionChoiceWidget .choiceDescriptionIcon {
  margin-right: 8px;
}
.subjectSelectionChoiceWidget.choiceDescriptionAvailable .choiceDescriptionContainer {
  display: flex;
}
.subjectSelectionChoiceWidget.choiceDescriptionIsFoldedIn .choiceDescriptionContainer .foldOutButton {
  display: flex;
}
.subjectSelectionChoiceWidget.choiceDescriptionIsFoldedOut .choiceDescriptionContainer .choiceDescription {
  overflow: visible;
  -webkit-line-clamp: unset;
  overflow-y: auto;
}
.subjectSelectionChoiceWidget.choiceDescriptionIsFoldedOut .choiceDescriptionContainer .foldInButton {
  display: flex;
}
.subjectSelectionChoiceWidget.cumulativeSubjectsAvailable .alreadyChosenSubjectsCumulativeContainer {
  display: flex;
}
.subjectSelectionChoiceWidget .contentChooseSubjects {
  padding-bottom: 72px;
}
.subjectSelectionChoiceWidget .segmentInfo {
  margin: 24px auto 16px;
  font-weight: bold;
  max-width: 75%;
}
.subjectSelectionChoiceWidget .extraInfoForOptions {
  max-width: 70%;
  margin: 16px auto 4px auto;
}
.subjectSelectionChoiceWidget .subjectNotSelected {
  margin: 4px 15%;
  max-width: 70%;
  width: 70%;
  border-radius: 4px;
  background-color: #EAEEEF;
  color: #2C3E50;
  padding: 12px;
  text-align: left;
  border: 0;
}
.subjectSelectionChoiceWidget .subjectSelected {
  margin: 4px 15%;
  max-width: 70%;
  width: 70%;
  border-radius: 4px;
  background-color: #81C784;
  color: #FFFFFF;
  padding: 12px;
  text-align: left;
  border: 0;
}
.subjectSelectionChoiceWidget .subjectAlreadySelected {
  margin: 4px 15%;
  max-width: 70%;
  width: 70%;
  border-radius: 4px;
  background-color: #EAEEEF;
  color: #2C3E50;
  padding: 12px;
  text-align: left;
  opacity: 40%;
  border: 0;
}
.subjectSelectionChoiceWidget .subjectText {
  float: left;
  width: calc(100% - 20px);
}
.subjectSelectionChoiceWidget .icon {
  float: right;
  color: #56826A;
  font-size: 18px;
}
.subjectSelectionChoiceWidget .conditionMessagesContainer {
  display: none;
  max-width: 70%;
  margin: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 25px;
}
.subjectSelectionChoiceWidget.conditionMessagesAvailable .conditionMessagesContainer {
  display: flex;
}
.subjectSelectionChoiceWidget .error {
  margin-right: 8px;
}
.subjectSelectionChoiceWidget .conditionWrong {
  color: #E24E4E;
}
.subjectSelectionChoiceWidget .separationBar {
  width: 70%;
  border: 1px solid #EAEEEF;
  display: none;
}
.subjectSelectionChoiceWidget.conditionMessagesAvailable.choiceDescriptionAvailable .separationBar {
  display: block;
}
.subjectSelectionChoiceWidget .spacing {
  margin-bottom: 8px;
}
.subjectSelectionChoiceWidget .bottom {
  display: flex;
  width: 100%;
  justify-content: center;
  position: absolute;
  bottom: 0;
  background-color: white;
  padding-top: 8px;
  padding-bottom: 16px;
}
.subjectSelectionChoiceWidget .buttonTrue, .subjectSelectionChoiceWidget .buttonFalse {
  background-color: #2C3E50;
  border-radius: 2px;
  width: 120px;
  text-align: center;
  padding: 10px 5px 10px 5px;
  margin-right: 15px;
  margin-left: 15px;
  color: #FFFFFF;
}
.subjectSelectionChoiceWidget .buttonStandard, .subjectSelectionChoiceWidget .buttonStandardNotClickable {
  background-color: #FFFFFF;
  border-radius: 2px;
  width: 120px;
  text-align: center;
  padding: 10px 5px 10px 5px;
  margin-right: 15px;
  margin-left: 15px;
  border-style: solid;
  border-color: #D4D7DB;
  border-width: 2px;
}
.subjectSelectionChoiceWidget .buttonStandardNotClickable {
  opacity: 30%;
}
.subjectSelectionChoiceWidget .buttonFalse {
  opacity: 30%;
}
.subjectSelectionChoiceWidget .specialBold {
  font-weight: 700;
}

#app .subjectSelectionChoiceWidget .specialBold {
  font-weight: 500;
}

.subjectSelectionFormPage {
  flex: 1;
  display: flex;
  background-color: white;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.subjectSelectionFormPage .view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.subjectSelectionFormPage .view .viewDetail {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.subjectSelectionFormPage .view.notEnrolledDisallowed .changeChoice {
  display: none;
}
.subjectSelectionFormPage .view .changeChoice {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.subjectSelectionFormPage .view .changeChoice div {
  flex: 0 1 50%;
  min-height: 24px;
  background-color: #4CAF50;
  display: inline-block;
  color: white;
  padding: 8px;
  margin: 8px;
  line-height: 24px;
  text-align: center;
  min-width: 0;
}

.miniPopupContent {
  margin-left: auto;
  margin-right: auto;
  max-width: 450px;
  max-height: 450px;
  padding: 16px;
}
.miniPopupContent .gwt-Button {
  max-height: 100px;
  max-width: 100px;
}
.miniPopupContent .closeIcon {
  position: absolute;
  top: 14px;
  right: 14px;
}
.miniPopupContent .title {
  font-weight: 430;
  font-size: 18px;
  color: #2C3E50;
}
.miniPopupContent .messageContent {
  margin-top: 16px;
  margin-bottom: 16px;
  font-weight: 300;
  color: #2C3E50;
  white-space: pre-wrap;
}
.miniPopupContent .buttonSpace {
  display: flex;
  width: 100%;
  justify-content: center;
}
.miniPopupContent .buttonLeft, .miniPopupContent .buttonRight {
  background-color: #FFFFFF;
  border-radius: 2px;
  width: 100%;
  text-align: center;
  padding: 8px;
  margin-right: 8px;
  border-style: solid;
  border-color: #D4D7DB;
  border-width: 2px;
  height: 50%;
  display: none;
}
.miniPopupContent .buttonRight {
  background-color: #2C3E50;
  color: #FFFFFF;
  border-color: #2C3E50;
}
.miniPopupContent .buttonRight.display, .miniPopupContent .buttonLeft.display {
  display: block;
}

.enrollmentPreregistrationDashboard {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.enrollmentPreregistrationDashboard .placeholder {
  display: none;
  width: 100%;
  line-height: 200px;
  font-size: 20px;
  color: #626262;
  text-align: center;
  font-style: italic;
}
.enrollmentPreregistrationDashboard .warning {
  display: none;
  width: 100%;
  height: 32px;
  padding-left: 24px;
  align-items: end;
  font-size: 20px;
  color: #E22D33;
  font-style: italic;
}
.enrollmentPreregistrationDashboard .dashboard {
  height: 100%;
  width: 100%;
  display: flex;
}
.enrollmentPreregistrationDashboard .statusCharts {
  display: flex;
  flex-direction: column;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  height: calc(100% - 32px);
  padding-top: 16px;
  padding-bottom: 16px;
}
.enrollmentPreregistrationDashboard .departmentChart {
  height: calc(100% - 32px);
  width: calc(60% - 80px);
  padding: 16px;
}
.enrollmentPreregistrationDashboard .problemOverviewChart {
  height: calc(100% - 32px);
  width: calc(40% - 80px);
  padding: 16px;
}
.enrollmentPreregistrationDashboard .insufficientStatusChart, .enrollmentPreregistrationDashboard .mediocreStatusChart, .enrollmentPreregistrationDashboard .perfectStatusChart {
  display: flex;
  align-items: center;
  width: 100%;
  height: 33%;
}
.enrollmentPreregistrationDashboard.hasWarning .warning {
  display: flex;
}
.enrollmentPreregistrationDashboard.hasWarning .dashboard {
  height: calc(100% - 32px);
}
.enrollmentPreregistrationDashboard.showPlaceholder .placeholder {
  display: block;
}
.enrollmentPreregistrationDashboard.showPlaceholder .warning, .enrollmentPreregistrationDashboard.showPlaceholder .dashboard {
  display: none;
}
.enrollmentPreregistrationDashboard .meterWidget {
  display: flex;
  justify-content: center;
}

/**Content ordering is as follows
  First we have some general stuff for the overal layout,
   + correctly setting the backgrounds etc. of the individual element
   + the singleton style
  Then we have 5 sections dealing with:
    1. CurrentPenaltiesSection
    2. DepartmentBundlesSection
    3. MainChartSection
    4. AdditionalContentSection
    5. Tab-related things (this is relevant for both the MainChart and AdditionalContent)
 */
.nexusDashboard {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
}
.nexusDashboard .placeholder {
  display: none;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 20px;
  color: #626262;
  text-align: center;
  font-style: italic;
  background-color: #ffffff;
}
.nexusDashboard .dashboard {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.nexusDashboard .bottom {
  display: flex;
  height: calc(50% - 2px - 16px);
  min-height: 340px;
  width: 100%;
}
.nexusDashboard .statusField, .nexusDashboard .startProfile, .nexusDashboard .startTime, .nexusDashboard .departmentBundlesContainer, .nexusDashboard .currentPenalties, .nexusDashboard .mainChart, .nexusDashboard .additionalContent {
  background-color: #ffffff;
  border: 1px #cccccc solid;
  border-radius: 8px;
}
.nexusDashboard .statusField, .nexusDashboard .startProfile, .nexusDashboard .startTime, .nexusDashboard .departmentBundlesContainer, .nexusDashboard .currentPenalties, .nexusDashboard .mainChartContainer, .nexusDashboard .additionalContentContainer {
  margin: 8px;
}
.nexusDashboard .headerContainer {
  display: flex;
  height: 56px;
}
.nexusDashboard .headerContainer .statusField {
  display: flex;
  height: 40px;
  line-height: 40px;
  width: 360px;
  padding-left: 16px;
}
.nexusDashboard .headerContainer .statusField .status {
  align-content: center;
  margin-right: 4px;
}
.nexusDashboard .headerContainer .statusField .statusImageRunning, .nexusDashboard .headerContainer .statusField .statusImageStopped {
  width: 24px;
  height: 24px;
  align-self: center;
}
.nexusDashboard .headerContainer .startProfile {
  font-size: 18px;
  width: 100%;
  min-width: fit-content;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.nexusDashboard .headerContainer .startTime {
  height: 40px;
  line-height: 40px;
  align-content: center;
  width: 200px;
  min-width: fit-content;
  text-align: center;
}
.nexusDashboard .statusImageRunning {
  display: none;
}
.nexusDashboard.running .statusImageRunning {
  display: block;
}
.nexusDashboard.running .statusImageStopped {
  display: none;
}
.nexusDashboard .currentPenalties {
  padding: 8px;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 16px - 16px);
  overflow: auto;
}
.nexusDashboard .departmentBundlesContainer {
  overflow-y: hidden;
  overflow-x: auto;
}
.nexusDashboard .departmentBundles {
  display: flex;
  height: 74px;
}
.nexusDashboard .departmentBundleInfoPanel, .nexusDashboard .phasePanel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 60px;
  padding: 4px 0px;
}
.nexusDashboard .departmentBundleInfoPanel .hardPenaltyContainer, .nexusDashboard .departmentBundleInfoPanel .phaseIconsContainer, .nexusDashboard .phasePanel .hardPenaltyContainer, .nexusDashboard .phasePanel .phaseIconsContainer {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 4px 0px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #ffffff;
  font-size: 14px;
  z-index: 1;
}
.nexusDashboard .departmentBundleInfoPanel .hardPenalty, .nexusDashboard .departmentBundleInfoPanel .phaseIcons, .nexusDashboard .phasePanel .hardPenalty, .nexusDashboard .phasePanel .phaseIcons {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d7d7d7;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.nexusDashboard .departmentBundleInfoPanel .singletonPhaseIcon, .nexusDashboard .phasePanel .singletonPhaseIcon {
  display: none;
  font-size: 24px;
}
.nexusDashboard .departmentBundleInfoPanel .multiPhaseIcon, .nexusDashboard .phasePanel .multiPhaseIcon {
  font-size: 24px;
}
.nexusDashboard .departmentBundleInfoPanel .phaseIcons, .nexusDashboard .phasePanel .phaseIcons {
  background-color: #81C784;
}
.nexusDashboard .departmentBundles .phasePanel {
  margin-top: 16px;
}
.nexusDashboard .departmentBundles.singletonPhase .singletonPhaseIcon {
  display: block;
}
.nexusDashboard .departmentBundles.singletonPhase .multiPhaseIcon {
  display: none;
}
.nexusDashboard .departmentBundles.singletonPhase .phaseIcons {
  background-color: #5C96C9;
}
.nexusDashboard .mainChartContainer {
  height: calc(50% - 2px - 16px - 74px - 2px - 56px - 2px);
  min-height: 200px;
  margin: 8px;
  display: grid;
  grid-template: "chart tab1" 40px "chart tab2" 40px "chart tab3" 40px "chart tab4" 40px "chart tab5" 40px "chart tab6" calc(100% - 200px)/auto 40px;
}
.nexusDashboard .mainChartContainer .mainChart {
  grid-area: chart;
}
.nexusDashboard .mainChartContainer .scheduleWidthChart {
  overflow-x: auto;
  overflow-y: hidden;
}
.nexusDashboard .mainChartContainer .scheduleWidthTab {
  grid-area: tab1;
}
.nexusDashboard .mainChartContainer .penaltyProgressTab {
  grid-area: tab2;
}
.nexusDashboard .additionalContentContainer {
  width: 80%;
  margin: 8px;
  display: grid;
  grid-template: "additionalContent tab1" 40px "additionalContent tab2" 40px "additionalContent tab3" 40px "additionalContent tab4" 40px "additionalContent tab5" 40px "additionalContent tab6" calc(100% - 200px - 16px)/calc(100% - 40px) 40px;
}
.nexusDashboard .additionalContentContainer .additionalContent {
  grid-area: additionalContent;
  width: calc(100% - 16px - 2px);
}
.nexusDashboard .additionalContentContainer .hardPenaltyCausesTab {
  grid-area: tab1;
}
.nexusDashboard .additionalContentContainer .gradedSoftPenaltiesTab {
  grid-area: tab2;
}
.nexusDashboard .additionalContentContainer .gradedSoftPenaltiesByDepartmentTab {
  grid-area: tab3;
}
.nexusDashboard .mainChart, .nexusDashboard .additionalContent {
  border-radius: 8px 0px 8px 8px;
  justify-content: center;
  align-items: center;
  height: calc(100% - 16px);
  padding: 8px;
  display: none;
}
.nexusDashboard .mainChart.selected, .nexusDashboard .additionalContent.selected {
  display: flex;
}
.nexusDashboard .additionalContent {
  height: 100%;
}
.nexusDashboard .tab {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #cccccc solid;
  border-radius: 0px 8px 8px 0px;
  position: relative;
  left: -1px;
  border-top: 0px;
}
.nexusDashboard .firstTab {
  border-top: 1px #cccccc solid;
}
.nexusDashboard .tab:hover {
  background-color: #f7f7f7;
  cursor: pointer;
}
.nexusDashboard .tab.selected {
  background-color: #ffffff;
  border-left: #ffffff;
}
.nexusDashboard.showPlaceholder .placeholder {
  display: block;
}
.nexusDashboard.showPlaceholder .dashboard {
  display: none;
}

.currentPenaltyInfo {
  display: flex;
  height: 36px;
  min-width: fit-content;
  border-radius: 4px;
  padding: 2px 0px;
}
.currentPenaltyInfo .typeIndicator {
  width: 4px;
  height: 100%;
  margin-left: 4px;
}
.currentPenaltyInfo .content {
  display: flex;
  width: calc(100% - 8px);
  padding-right: 8px;
  border-radius: 0px 4px 4px 0px;
}
.currentPenaltyInfo .titleAndSoftContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
}
.currentPenaltyInfo .title {
  font-size: 15px;
  padding-left: 4px;
  line-height: 36px;
}
.currentPenaltyInfo .softPenaltyContainer {
  align-content: center;
  padding-right: 18px;
  text-align: right;
}
.currentPenaltyInfo .hardPenaltyContainer {
  width: 40px;
  min-width: 40px;
  height: 100%;
  text-align: center;
  align-content: center;
}
.currentPenaltyInfo .softPenaltyChange, .currentPenaltyInfo .hardPenaltyChange {
  font-size: 11px;
  opacity: 50%;
}
.currentPenaltyInfo .hardPenalty {
  color: #ffffff;
  background-color: #D32F2E;
  border-radius: 4px;
}
.currentPenaltyInfo .tooltip {
  display: none !important;
}
@media (max-width: 1624px) {
  .currentPenaltyInfo .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 5ch;
    overflow: hidden;
  }
  .currentPenaltyInfo .tooltip {
    display: unset !important;
  }
}
.currentPenaltyInfo.total {
  background-color: #e0e0e0;
}
.currentPenaltyInfo.total .title {
  font-weight: 600;
}
.currentPenaltyInfo.total .softPenalty, .currentPenaltyInfo.total .hardPenalty {
  font-weight: 600;
  background-color: unset;
  color: unset;
}
.currentPenaltyInfo.softPenaltyDown .softPenaltyChange {
  color: #81C784;
  opacity: 100%;
}
.currentPenaltyInfo.softPenaltyUp .softPenaltyChange {
  color: #D32F2E;
  opacity: 100%;
}
.currentPenaltyInfo.hardPenaltyDown .hardPenaltyChange {
  color: #81C784;
  opacity: 100%;
}
.currentPenaltyInfo.hardPenaltyUp .hardPenaltyChange {
  color: #D32F2E;
  opacity: 100%;
}
.currentPenaltyInfo.zeroHard:not(.currentPenaltyInfo.total) .hardPenalty {
  background-color: #81C784;
}
.currentPenaltyInfo.inSingletonPhase:not(.currentPenaltyInfo.total) .hardPenalty {
  background-color: unset;
  color: unset;
}
.currentPenaltyInfo.TEACHERS .typeIndicator {
  background-color: #D83C03;
}
.currentPenaltyInfo.EDUCATION .typeIndicator {
  background-color: #FBD029;
}
.currentPenaltyInfo.STUDENTS .typeIndicator {
  background-color: #A0C969;
}
.currentPenaltyInfo.COUNTING_GROUPS .typeIndicator {
  background-color: #6C98E3;
}
.currentPenaltyInfo.GROUPING .typeIndicator {
  background-color: #E730BC;
}
.currentPenaltyInfo.CHANGES .typeIndicator {
  background-color: #35DDC8;
}
.currentPenaltyInfo.VARIOUS .typeIndicator {
  background-color: #808080;
}
.currentPenaltyInfo.selected.TEACHERS .content {
  background-color: color-mix(in srgb, #D83C03, transparent 60%);
}
.currentPenaltyInfo.selected.EDUCATION .content {
  background-color: color-mix(in srgb, #FBD029, transparent 60%);
}
.currentPenaltyInfo.selected.STUDENTS .content {
  background-color: color-mix(in srgb, #A0C969, transparent 60%);
}
.currentPenaltyInfo.selected.COUNTING_GROUPS .content {
  background-color: color-mix(in srgb, #6C98E3, transparent 60%);
}
.currentPenaltyInfo.selected.GROUPING .content {
  background-color: color-mix(in srgb, #E730BC, transparent 60%);
}
.currentPenaltyInfo.selected.CHANGES .content {
  background-color: color-mix(in srgb, #35DDC8, transparent 60%);
}
.currentPenaltyInfo.selected.VARIOUS .content {
  background-color: color-mix(in srgb, #808080, transparent 60%);
}

.currentPenaltyInfo:hover {
  cursor: pointer;
}
.currentPenaltyInfo:hover.TEACHERS .content {
  background-color: color-mix(in srgb, #D83C03, transparent 80%);
}
.currentPenaltyInfo:hover.EDUCATION .content {
  background-color: color-mix(in srgb, #FBD029, transparent 80%);
}
.currentPenaltyInfo:hover.STUDENTS .content {
  background-color: color-mix(in srgb, #A0C969, transparent 80%);
}
.currentPenaltyInfo:hover.COUNTING_GROUPS .content {
  background-color: color-mix(in srgb, #6C98E3, transparent 80%);
}
.currentPenaltyInfo:hover.GROUPING .content {
  background-color: color-mix(in srgb, #E730BC, transparent 80%);
}
.currentPenaltyInfo:hover.CHANGES .content {
  background-color: color-mix(in srgb, #35DDC8, transparent 80%);
}
.currentPenaltyInfo:hover.VARIOUS .content {
  background-color: color-mix(in srgb, #808080, transparent 80%);
}

.departmentBundleInfoPanel .departmentBundleName {
  height: 16px;
  font-size: 14px;
  color: #737373;
}
.departmentBundleInfoPanel .departmentBundleBar {
  background-color: #eeeeee;
  height: 12px;
  width: 100%;
  position: absolute;
  top: 39px;
  right: 50%;
  background-position: 100%;
}
.departmentBundleInfoPanel .hardPenalty {
  background-position: bottom;
}
.departmentBundleInfoPanel .hardPenaltyContainer {
  background-position: right;
}
.departmentBundleInfoPanel .icon {
  display: none;
  position: absolute;
}
.departmentBundleInfoPanel.singletonPhase0 .hardPenalty {
  background-color: #FD79A8;
}
.departmentBundleInfoPanel.multiPhase0 .departmentBundleBar {
  background: linear-gradient(to right, #81C784 50%, #eeeeee 50%);
  background-size: 200% 100%;
  background-position: 75%;
}
.departmentBundleInfoPanel.singletonPhase1 .hardPenalty {
  background-color: #F1C232;
}
.departmentBundleInfoPanel.multiPhase1 .departmentBundleBar {
  background: linear-gradient(to right, #81C784 50%, #eeeeee 50%);
  background-size: 200% 100%;
  background-position: 50%;
}
.departmentBundleInfoPanel.singletonPhase2 .hardPenalty {
  background-color: #5C96C9;
}
.departmentBundleInfoPanel.multiPhase2 .departmentBundleBar {
  background: linear-gradient(to right, #81C784 50%, #eeeeee 50%);
  background-size: 200% 100%;
  background-position: 25%;
}
.departmentBundleInfoPanel.singletonPhase3 .hardPenalty {
  background-color: #81C784;
}
.departmentBundleInfoPanel.multiPhase3 .departmentBundleBar {
  background: linear-gradient(to right, #81C784 50%, #eeeeee 50%);
  background-size: 200% 100%;
  background-position: 0%;
}
.departmentBundleInfoPanel.withPenalty .hardPenalty {
  background-color: #D32F2E;
}
.departmentBundleInfoPanel.multiPhase3 .hardPenalty {
  background-color: #81C784;
}
.departmentBundleInfoPanel.multiPhase3 .icon {
  display: block;
}
.departmentBundleInfoPanel.pulse .hardPenaltyContainer {
  animation-name: pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.departmentBundleInfoPanel .hardPenalty.placeSwitch {
  background: linear-gradient(to top, var(--bgColor) 50%, #ffffff 50%) var(--position);
  background-size: 100% 200%;
  transition: background-position 2s ease-in-out;
}
.departmentBundleInfoPanel .hardPenalty.singletonPhaseSwitch {
  background-color: var(--bgColor);
  transition: background-color 4s ease-in-out;
}
.departmentBundleInfoPanel .hardPenalty.multiPhaseSwitch {
  background-color: #81C784;
  transition: background-color 2s ease-in-out;
}
.departmentBundleInfoPanel .departmentBundleName.placeSwitch {
  opacity: var(--opacity);
  transition: opacity 2s ease-in-out;
}
.departmentBundleInfoPanel .departmentBundleBar.multiPhaseSwitch {
  background: linear-gradient(to right, #81C784 50%, #eeeeee 50%) var(--position);
  background-size: 200% 100%;
  transition: background-position var(--phaseChangeDuration) var(--easeType);
}
.departmentBundleInfoPanel .hardPenaltyContainer.multiPhaseSwitch {
  background: linear-gradient(to right, #81C784 50%, #ffffff 50%) var(--position);
  background-size: 200% 100%;
  transition: background-position 1.5s ease-out;
}
.departmentBundleInfoPanel .hardPenaltyContainer.multiPhaseSwitchEnd {
  background-color: var(--bgColor);
  transition: background-color 4s ease;
}

.departmentBundleInfoPanel:first-child .departmentBundleBar {
  visibility: hidden;
}

@keyframes pulse {
  0% {
    background-color: #ffffff;
  }
  50% {
    background-color: #81C784;
  }
  100% {
    background-color: #ffffff;
  }
}
.hardPenaltyCause {
  display: flex;
  width: 100%;
  height: 32px;
  border-bottom: 1px solid #e0e0e0;
}
.hardPenaltyCause .typeIndicator {
  width: 4px;
  height: calc(100% - 8px);
  margin: 4px 0px 4px 4px;
}
.hardPenaltyCause .content {
  display: flex;
  width: calc(100% - 4px - 16px);
  padding: 0px 4px 4px;
  margin-top: 4px;
}
.hardPenaltyCause .causeAndOriginContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 56px);
  min-width: max-content;
}
.hardPenaltyCause .cause {
  line-height: 32px;
  min-width: fit-content;
}
.hardPenaltyCause .originContainer {
  visibility: hidden;
  display: flex;
  align-content: center;
  padding-right: 18px;
  text-align: right;
  line-height: 32px;
  min-width: fit-content;
}
.hardPenaltyCause .amountContainer {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 56px;
  min-width: 56px;
  height: 100%;
  text-align: center;
}
.hardPenaltyCause .amountContainer .amount {
  color: #ffffff;
  background-color: #D32F2E;
  border-radius: 4px;
  width: 40px;
}
.hardPenaltyCause.header {
  background-color: #e0e0e0;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 4px;
}
.hardPenaltyCause.header .amount {
  background-color: unset;
  color: unset;
  width: unset;
}
.hardPenaltyCause.withOrigin .originContainer {
  visibility: visible;
}
.hardPenaltyCause.TEACHERS .typeIndicator {
  background-color: #D83C03;
}
.hardPenaltyCause.EDUCATION .typeIndicator {
  background-color: #FBD029;
}
.hardPenaltyCause.STUDENTS .typeIndicator {
  background-color: #A0C969;
}
.hardPenaltyCause.COUNTING_GROUPS .typeIndicator {
  background-color: #6C98E3;
}
.hardPenaltyCause.GROUPING .typeIndicator {
  background-color: #E730BC;
}
.hardPenaltyCause.CHANGES .typeIndicator {
  background-color: #35DDC8;
}
.hardPenaltyCause.VARIOUS .typeIndicator {
  background-color: #808080;
}

.hardPenaltyCause:last-child {
  border: none;
}

.hardPenaltyCauseOverview {
  display: flex;
  width: 100%;
  height: 100%;
}
.hardPenaltyCauseOverview .hardPenaltyCauseContainer, .hardPenaltyCauseOverview .hardPenaltyCauseChart {
  width: calc(50% - 8px);
  padding: 4px;
  overflow: auto;
  scrollbar-width: thin;
}
.hardPenaltyCauseOverview .noHardPenalties {
  width: calc(100% - 8px);
  padding: 4px;
}
.hardPenaltyCauseOverview .hardPenaltyCauseContainer {
  display: flex;
  flex-direction: column;
  justify-content: unset;
}
.hardPenaltyCauseOverview .hardPenaltyCauseList {
  min-width: max-content;
}
.hardPenaltyCauseOverview .hardPenaltyCauseChart {
  display: flex;
  justify-content: center;
}
.hardPenaltyCauseOverview .noHardPenalties {
  display: none;
  text-align: center;
  padding-top: 48px;
}
.hardPenaltyCauseOverview .noHardPenalties .icon {
  color: #81C784;
  font-size: 48px;
}
.hardPenaltyCauseOverview .noHardPenalties .noHardPenaltiesText {
  font-size: 24px;
}
.hardPenaltyCauseOverview.noHardPenalties .hardPenaltyCauseContainer, .hardPenaltyCauseOverview.noHardPenalties .hardPenaltyCauseChart {
  display: none;
}
.hardPenaltyCauseOverview.noHardPenalties .noHardPenalties {
  display: block;
}

.tooltip {
  display: none;
  visibility: hidden;
  position: absolute;
  z-index: 10;
  width: fit-content;
  height: fit-content;
  background-color: #ffffff;
  border: 2px solid #cccccc;
  border-radius: 6px;
  color: #000000;
  font-size: 12px;
  text-align: center;
  padding: 8px;
  font-weight: 400;
  opacity: 0%;
  transition: opacity 1ms steps(1, end);
  transition-delay: 200ms;
  margin: 4px;
}

.tooltipParent {
  position: relative;
}

.tooltipParent:hover .tooltip:not(:empty) {
  display: unset;
  visibility: visible;
  opacity: 100%;
}