@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/vendor/material-icons/iconmaterial-icons.woff2?ff72a62dc27e9ea444b6ea54e99027e7) format("woff2"), url(/fonts/vendor/material-icons/iconmaterial-icons.woff?53abdaab74ac66470536cb75010236c8) format("woff");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/vendor/material-icons/iconmaterial-icons-outlined.woff2?73319595f421ef8247b12478a304a1a1) format("woff2"), url(/fonts/vendor/material-icons/iconmaterial-icons-outlined.woff?caaa30bfc2787b8a34d942d7ad96dc00) format("woff");
}
.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Round";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/vendor/material-icons/iconmaterial-icons-round.woff2?b48566658cf6cdc085ef7f1ac912c224) format("woff2"), url(/fonts/vendor/material-icons/iconmaterial-icons-round.woff?8fce91b9f9c627c2c2608a3768c5681e) format("woff");
}
.material-icons-round {
  font-family: "Material Icons Round";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Sharp";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/vendor/material-icons/iconmaterial-icons-sharp.woff2?0cf959b1473bddd8250849bc08823b45) format("woff2"), url(/fonts/vendor/material-icons/iconmaterial-icons-sharp.woff?2da22890bca946c7a100d4fd003d0d99) format("woff");
}
.material-icons-sharp {
  font-family: "Material Icons Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Two Tone";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/vendor/material-icons/iconmaterial-icons-two-tone.woff2?c142818ceebfd170aa693b41a7c9622e) format("woff2"), url(/fonts/vendor/material-icons/iconmaterial-icons-two-tone.woff?8e41f5e6fbad90e70672e16eec4a2196) format("woff");
}
.material-icons-two-tone {
  font-family: "Material Icons Two Tone";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

.navigation {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: space-between;
  padding: 0px 15px;
  font-size: 12px;
  background-color: #252942;
  margin-bottom: 20px;
  z-index: 9999;
}
.navigation .left-nav {
  display: flex;
  align-items: center;
}
.navigation .left-nav a {
  display: inline-flex;
  align-items: center;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
.navigation .left-nav a .material-icons {
  margin-right: 10px;
}
.navigation .left-nav a.active {
  background-color: #514847;
}
.navigation .right-nav {
  display: flex;
  align-items: center;
}
.navigation .right-nav a {
  color: #fff;
}
.navigation .right-nav .button {
  border: 1px solid #fff;
  padding: 5px 10px;
  color: #fff;
  margin-left: 15px;
  border-radius: 4px;
  text-decoration: none;
  margin-right: 20px;
}

.breadcrumb {
  align-items: center;
  margin-top: 5px;
  padding: 5px 0px;
  font-size: 14px;
  color: #828282;
}
.breadcrumb a {
  color: #828282;
}

button, form {
  all: unset;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 8px;
}
label .required {
  color: #e66363;
}

button {
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 13px;
  text-decoration: none;
}
button.call-to-action {
  padding: 8px 15px;
  background-color: #514847;
  color: #fff;
}
button.success {
  padding: 8px 15px;
  background-color: #514847;
  color: #fff;
}

.form-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  font-size: 14px;
}
.form-row .form-col {
  flex-basis: 100%;
}
.form-row .form-col input:not([type=checkbox]):not([type=radio]), .form-row .form-col select, .form-row .form-col textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #edf0f2;
  font-size: 14px;
  height: 40px;
}
.form-row .field-error {
  margin-top: 10px;
  color: #c72f21;
  font-size: 14px;
  padding-left: 8px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.alert {
  border-radius: 3px;
  margin: 20px;
  padding: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.alert a {
  margin: 0px 4px;
}
.alert .material-icons {
  margin-right: 10px;
}
.alert.success {
  border: 1px solid #1f7a39;
  color: #fff;
  background-color: #2a8f47;
}
.alert.error {
  border: 1px solid #b82331;
  color: #fff;
  background-color: #c72f21;
}
.alert.warning {
  border: 1px solid #d67c22;
  color: #fff;
  background-color: #ef8a26;
}
.alert a {
  color: #fff;
  text-decoration: underline;
}

.results-list {
  border-collapse: collapse;
  width: 100%;
}
.results-list td, .results-list th {
  font-size: 14px;
}
.results-list td {
  background-color: #fff;
  padding: 12px 10px;
}
.results-list td:not(.total) {
  border-bottom: 1px solid #d5d9de;
}
.results-list td a .material-icons {
  font-size: 18px;
}
.results-list td .tooltip {
  cursor: pointer;
  margin-left: 3px;
  position: relative;
  top: 3px;
  color: #514847;
  font-size: 16px;
}
.results-list td .button {
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 13px;
  text-decoration: none;
  color: #24292e;
  margin-left: 10px;
}
.results-list td.no-results {
  padding-top: 20px;
  text-align: center;
  border-bottom: 0px;
}
.results-list tr:not(.warning):not(.critical-error):not(.total):nth-child(odd) td {
  background-color: rgba(37, 41, 66, 0.05);
}
.results-list th {
  padding: 12px 10px;
  text-align: left;
  font-weight: normal;
}
.results-list th:not(.summary) {
  font-weight: 600;
  border-top: 1px solid #d5d9de;
  border-bottom: 1px solid #d5d9de;
  background-color: rgba(37, 41, 66, 0.3);
}

.scrollable {
  overflow-x: auto;
}
.scrollable__left {
  background-color: #fff;
  position: absolute;
  z-index: 1000;
}
.scrollable__left .scrollable__col {
  min-width: 190px;
  padding: 12px 10px;
}
.scrollable__data {
  position: relative;
  left: 190px;
}
.scrollable__data .scrollable__col {
  min-width: 300px;
  padding: 12px 10px;
}
.scrollable__row {
  display: flex;
  border-bottom: 1px solid #d5d9de;
}
.scrollable__row:nth-child(odd) {
  background-color: rgba(37, 41, 66, 0.05);
}
.scrollable .scrollable__header .scrollable__col {
  font-size: 14px;
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  border-top: 1px solid #d5d9de;
  border-bottom: 1px solid #d5d9de;
  background-color: rgba(37, 41, 66, 0.3);
}
.scrollable .no-results {
  position: fixed;
  padding-top: 20px;
  text-align: center;
  border-bottom: 0px;
}

.search .button {
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 13px;
  text-decoration: none;
  color: #fff;
}
.search .button__toggle, .search .button__clear {
  color: #24292e;
}
.search .button__clear {
  margin-left: 5px;
}
.search .button .material-icons {
  margin-right: 5px;
  font-size: 20px;
}

.calendar-container {
  background-color: #2d3359;
  color: #fff;
  position: fixed;
  top: 53px;
  margin-left: 205px;
  transform: translateX(-100%);
  padding: 10px;
  width: 430px;
}
.calendar-container__options {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.calendar-container__preset {
  width: 110px;
  font-size: 10px;
  margin: 0px 2px 4px 2px;
  padding: 5px 10px;
  cursor: pointer;
  text-align: center;
  border-radius: 1px;
  border: 1px solid #898dab;
}
.calendar-container__preset.selected {
  background-color: #fff;
  color: #2d3359;
  border: 1px solid #fff;
}
.calendar-container__actions {
  display: flex;
  justify-content: center;
  margin: 10px 0px 15px 0px;
}
.calendar-container__actions .disabled {
  opacity: 0.1;
  cursor: not-allowed;
}
.calendar-container__option {
  flex-grow: 1;
  width: 50%;
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-container__option .material-icons {
  margin-right: 10px;
}
.calendar-container__option.selected {
  background-color: #fff;
  color: #2d3359;
}
.calendar-container__tooltip {
  margin: 10px 65px 20px 65px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
}
.calendar-container__tooltip .material-icons {
  margin-right: 10px;
}
.calendar-container .calendar {
  position: relative;
}
.calendar-container .calendar .calendar__navigation {
  display: flex;
}
.calendar-container .calendar .calendar__navigation .calendar__previous {
  text-align: right;
}
.calendar-container .calendar .calendar__navigation .calendar__next {
  text-align: left;
}
.calendar-container .calendar .calendar__navigation .calendar__previous, .calendar-container .calendar .calendar__navigation .calendar__next {
  cursor: pointer;
  width: 100px;
  flex-grow: 1;
}
.calendar-container .calendar .calendar__navigation .calendar__previous .material-icons, .calendar-container .calendar .calendar__navigation .calendar__next .material-icons {
  font-size: 14px;
}
.calendar-container .calendar .calendar__navigation .calendar__current {
  text-align: center;
  width: 150px;
}
.calendar-container .calendar__days {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.calendar-container .calendar__row {
  display: flex;
}
.calendar-container .calendar__col {
  position: relative;
  width: 40px;
  padding: 10px;
  text-align: center;
  border: 1px solid #2d3359;
}
.calendar-container .calendar__col.clickable {
  cursor: pointer;
}
.calendar-container .calendar__col.dimmed {
  color: #898dab;
}
.calendar-container .calendar__col.in-range {
  background-color: #4a517d;
}
.calendar-container .calendar__clear {
  position: absolute;
  right: 20px;
  top: calc(50% - 40px);
  transform: translateY(-50%);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.calendar-container .calendar__clear .material-icons {
  font-size: 18px;
  display: block;
  margin-bottom: 5px;
}

.snapshot-selector {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.chart__row {
  display: flex;
  justify-content: center;
}
.chart__pie {
  display: flex;
  align-items: center;
}
.chart__pie:nth-child(2) {
  margin: 0px 100px;
}
.chart__additional-info {
  margin-left: 10px;
}
.chart__additional-info .info .figure {
  font-size: 24px;
}
.chart__additional-info .figure {
  font-weight: 600;
}
.chart__additional-info .red {
  color: #c72f21;
}
.chart__additional-info .orange {
  color: #ef8a26;
}
.chart__additional-info .green {
  color: #2a8f47;
}
.chart__additional-info .remarks {
  padding-left: 10px;
  font-size: 14px;
}

* {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}

body {
  padding-top: 50px;
  color: #24292e;
}

.no-selection {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.login-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
}

.label {
  font-size: 10px;
  padding: 2px 4px;
  margin-left: 5px;
  border-radius: 2px;
}
.label.success {
  border: 1px solid #1f7a39;
  color: #fff;
  background-color: #2a8f47;
}
.label.error {
  border: 1px solid #b82331;
  color: #fff;
  background-color: #c72f21;
}
.label.warning {
  border: 1px solid #d67c22;
  color: #fff;
  background-color: #ef8a26;
}

.content {
  padding: 20px;
}
.content .header {
  margin-bottom: 20px;
}
.content .header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 10px 0px 0px 0px;
}
.content .button .material-icons {
  margin-right: 5px;
}

.hidden {
  display: none;
}

h3 {
  font-size: 16px;
}

#modal {
  display: none;
  z-index: 9001;
  width: 80vw;
  height: 80vh;
  border-radius: 10px;
  background-color: #FAFAFA;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0px 15px 15px 15px;
}
#modal .modal-title {
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: 600;
}
#modal .modal-body {
  padding: 10px;
  min-height: calc(100% - 55px);
  max-height: calc(100% - 55px);
  overflow-y: auto;
}
#modal .modal-close {
  position: absolute;
  top: 17px;
  right: 15px;
  font-size: 18px;
  cursor: pointer;
}
#modal .modal-close .material-icons {
  font-size: 18px;
}

.tooltip-message {
  text-align: left;
  position: absolute;
  background-color: #ef8a26;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0px 3px 4px -5px rgb(66, 68, 90);
}

.section-header {
  padding: 13px 10px;
  background-color: #252942;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}