/* Document
 * ========================================================================== */

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */

:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

:where(body) {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 */

:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */

:where(nav li)::before {
  content: "\200B";
  float: left;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */

:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Add the correct text decoration in Safari.
 */

:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

:where(small) {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

:where(iframe) {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

:where(svg:not([fill])) {
  fill: currentColor;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

:where(button, input, select) {
  margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
  -webkit-appearance: button;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

:where(fieldset) {
  border: 1px solid #a0a0a0;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

:where(progress) {
  vertical-align: baseline;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */

:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

:where([type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct styles in Safari.
 */

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in Safari.
 */

:where(details > summary:first-of-type) {
  display: list-item;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

:where([aria-busy="true" i]) {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

:where([aria-controls]) {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

:where([aria-hidden="false" i][hidden]) {
  display: initial;
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* -- container -- */
.rodal,
.rodal-mask {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.rodal {
  position: fixed;
}

/* -- mask -- */
.rodal-mask {
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
}

/* -- dialog -- */
.rodal-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 101;
  padding: 15px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rodal-dialog:focus {
  outline: none;
}

/* -- close button -- */
.rodal-close {
  position: absolute;
  cursor: pointer;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
}

.rodal-close:before,
.rodal-close:after {
  position: absolute;
  content: '';
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #999;
  border-radius: 100%;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.rodal-close:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rodal-close:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.rodal-close:hover:before,
.rodal-close:hover:after {
  background: #333;
}

/* -- fade -- */
@-webkit-keyframes rodal-fade-enter {
  from {
    opacity: 0;
  }
}

@keyframes rodal-fade-enter {
  from {
    opacity: 0;
  }
}

.rodal-fade-enter {
  -webkit-animation: rodal-fade-enter both ease-in;
  animation: rodal-fade-enter both ease-in;
}

@-webkit-keyframes rodal-fade-leave {
  to {
    opacity: 0;
  }
}

@keyframes rodal-fade-leave {
  to {
    opacity: 0;
  }
}

.rodal-fade-leave {
  -webkit-animation: rodal-fade-leave both ease-out;
  animation: rodal-fade-leave both ease-out;
}

/* -- zoom -- */
@-webkit-keyframes rodal-zoom-enter {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes rodal-zoom-enter {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.rodal-zoom-enter {
  -webkit-animation: rodal-zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: rodal-zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-zoom-leave {
  to {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes rodal-zoom-leave {
  to {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.rodal-zoom-leave {
  -webkit-animation: rodal-zoom-leave both;
  animation: rodal-zoom-leave both;
}

/* -- slideDown -- */
@-webkit-keyframes rodal-slideDown-enter {
  from {
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }
}

@keyframes rodal-slideDown-enter {
  from {
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }
}

.rodal-slideDown-enter {
  -webkit-animation: rodal-slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: rodal-slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideDown-leave {
  to {
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }
}

@keyframes rodal-slideDown-leave {
  to {
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }
}

.rodal-slideDown-leave {
  -webkit-animation: rodal-slideDown-leave both;
  animation: rodal-slideDown-leave both;
}

/* -- slideLeft -- */
@-webkit-keyframes rodal-slideLeft-enter {
  from {
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
  }
}

@keyframes rodal-slideLeft-enter {
  from {
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
  }
}

.rodal-slideLeft-enter {
  -webkit-animation: rodal-slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: rodal-slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideLeft-leave {
  to {
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
  }
}

@keyframes rodal-slideLeft-leave {
  to {
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
  }
}

.rodal-slideLeft-leave {
  -webkit-animation: rodal-slideLeft-leave both;
  animation: rodal-slideLeft-leave both;
}

/* -- slideRight -- */
@-webkit-keyframes rodal-slideRight-enter {
  from {
    -webkit-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0);
  }
}

@keyframes rodal-slideRight-enter {
  from {
    -webkit-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0);
  }
}

.rodal-slideRight-enter {
  -webkit-animation: rodal-slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: rodal-slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideRight-leave {
  to {
    -webkit-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0);
  }
}

@keyframes rodal-slideRight-leave {
  to {
    -webkit-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0);
  }
}

.rodal-slideRight-leave {
  -webkit-animation: rodal-slideRight-leave both;
  animation: rodal-slideRight-leave both;
}

/* -- slideUp -- */
@-webkit-keyframes rodal-slideUp-enter {
  from {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

@keyframes rodal-slideUp-enter {
  from {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

.rodal-slideUp-enter {
  -webkit-animation: rodal-slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: rodal-slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideUp-leave {
  to {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

@keyframes rodal-slideUp-leave {
  to {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

.rodal-slideUp-leave {
  -webkit-animation: rodal-slideUp-leave both;
  animation: rodal-slideUp-leave both;
}

/* -- flip -- */
@-webkit-keyframes rodal-flip-enter {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes rodal-flip-enter {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.rodal-flip-enter {
  -webkit-animation: rodal-flip-enter both ease-in;
  animation: rodal-flip-enter both ease-in;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes rodal-flip-leave {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}

@keyframes rodal-flip-leave {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}

.rodal-flip-leave {
  -webkit-animation: rodal-flip-leave both;
  animation: rodal-flip-leave both;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

/* -- rotate -- */
@-webkit-keyframes rodal-rotate-enter {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes rodal-rotate-enter {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
}

.rodal-rotate-enter {
  -webkit-animation: rodal-rotate-enter both;
  animation: rodal-rotate-enter both;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rodal-rotate-leave {
  to {
    -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
    transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes rodal-rotate-leave {
  to {
    -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
    transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}

.rodal-rotate-leave {
  -webkit-animation: rodal-rotate-leave both;
  animation: rodal-rotate-leave both;
  -webkit-transform-origin: center;
  transform-origin: center;
}

/* -- door -- */
@-webkit-keyframes rodal-door-enter {
  from {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
}

@keyframes rodal-door-enter {
  from {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
}

.rodal-door-enter {
  -webkit-animation: rodal-door-enter both cubic-bezier(0.4, 0, 0, 1.5);
  animation: rodal-door-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-door-leave {
  60% {
    -webkit-transform: scale3d(0.01, 1, 1);
    transform: scale3d(0.01, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0, 1, 0.1);
    transform: scale3d(0, 1, 0.1);
  }
}

@keyframes rodal-door-leave {
  60% {
    -webkit-transform: scale3d(0.01, 1, 1);
    transform: scale3d(0.01, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0, 1, 0.1);
    transform: scale3d(0, 1, 0.1);
  }
}

.rodal-door-leave {
  -webkit-animation: rodal-door-leave both;
  animation: rodal-door-leave both;
}

/*!
 * https://github.com/arqex/react-datetime
 */

.rdt {
  position: relative;
}
.rdtPicker {
  display: none;
  position: absolute;
  min-width: 250px;
  padding: 4px;
  margin-top: 1px;
  z-index: 99999 !important;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border: 1px solid #f9f9f9;
}
.rdtOpen .rdtPicker {
  display: block;
}
.rdtStatic .rdtPicker {
  box-shadow: none;
  position: static;
}

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

.rdtPicker table {
  width: 100%;
  margin: 0;
}
.rdtPicker td,
.rdtPicker th {
  text-align: center;
  height: 28px;
}
.rdtPicker td {
  cursor: pointer;
}
.rdtPicker td.rdtDay:hover,
.rdtPicker td.rdtHour:hover,
.rdtPicker td.rdtMinute:hover,
.rdtPicker td.rdtSecond:hover,
.rdtPicker .rdtTimeToggle:hover {
  background: #eeeeee;
  cursor: pointer;
}
.rdtPicker td.rdtOld,
.rdtPicker td.rdtNew {
  color: #999999;
}
.rdtPicker td.rdtToday {
  position: relative;
}
.rdtPicker td.rdtToday:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #428bca;
  border-top-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
  background-color: #428bca;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.rdtPicker td.rdtActive.rdtToday:before {
  border-bottom-color: #fff;
}
.rdtPicker td.rdtDisabled,
.rdtPicker td.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}

.rdtPicker td span.rdtOld {
  color: #999999;
}
.rdtPicker td span.rdtDisabled,
.rdtPicker td span.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}
.rdtPicker th {
  border-bottom: 1px solid #f9f9f9;
}
.rdtPicker .dow {
  width: 14.2857%;
  border-bottom: none;
  cursor: default;
}
.rdtPicker th.rdtSwitch {
  width: 100px;
}
.rdtPicker th.rdtNext,
.rdtPicker th.rdtPrev {
  font-size: 21px;
  vertical-align: top;
}

.rdtPrev span,
.rdtNext span {
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}
.rdtPicker thead tr:first-of-type th {
  cursor: pointer;
}
.rdtPicker thead tr:first-of-type th:hover {
  background: #eeeeee;
}

.rdtPicker tfoot {
  border-top: 1px solid #f9f9f9;
}

.rdtPicker button {
  border: none;
  background: none;
  cursor: pointer;
}
.rdtPicker button:hover {
  background-color: #eee;
}

.rdtPicker thead button {
  width: 100%;
  height: 100%;
}

td.rdtMonth,
td.rdtYear {
  height: 50px;
  width: 25%;
  cursor: pointer;
}
td.rdtMonth:hover,
td.rdtYear:hover {
  background: #eee;
}

.rdtCounters {
  display: inline-block;
}

.rdtCounters > div {
  float: left;
}

.rdtCounter {
  height: 100px;
}

.rdtCounter {
  width: 40px;
}

.rdtCounterSeparator {
  line-height: 100px;
}

.rdtCounter .rdtBtn {
  height: 40%;
  line-height: 40px;
  cursor: pointer;
  display: block;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}
.rdtCounter .rdtBtn:hover {
  background: #eee;
}
.rdtCounter .rdtCount {
  height: 20%;
  font-size: 1.2em;
}

.rdtMilli {
  vertical-align: middle;
  padding-left: 8px;
  width: 48px;
}

.rdtMilli input {
  width: 100%;
  font-size: 1.2em;
  margin-top: 37px;
}

.rdtTime td {
  cursor: default;
}

@font-face {
  font-family: Roboto;
  src: url(/094b548d8134a48bd307.ttf) format("truetype");
  font-weight: 400;
  font-style: 400;
}
@font-face {
  font-family: Roboto;
  src: url(/f5581866d02eb43cdfe6.ttf) format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/60dfafa8adba1b0a72c4.ttf) format("truetype");
  font-weight: 700;
  font-style: 400;
}
@font-face {
  font-family: Roboto;
  src: url(/bda17116a17909f71dbf.ttf) format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/a31484be96dd2a0220d1.ttf) format("truetype");
  font-weight: 100;
  font-style: 400;
}
@font-face {
  font-family: Roboto;
  src: url(/c83df298a03b2a1b936a.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/be598c7ddfcdd13cb923.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/b31a1c05502050142ca7.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/ff3fa112b4e1a1b7b4bd.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/65ae74fb3701ab6aba54.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/105ac227ce89f2e86ea7.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/e5e49a23a6764cab193d.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
/* For mobile phones: */
[class*=col-] {
  width: 100%;
}

@media only screen and (min-width: 900px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}
.portal-select-input {
  margin: 1em 0;
}
.portal-select-input:focus {
  outline: none;
}
.portal-select-input.is-focused > .Select-control, .portal-select-input.is-focused:not(.is-open) > .Select-control, .portal-select-input.is-psuedo-focused > .Select-control {
  /* stylelint-disable */
  /* !important is needed here to overwrite the default styling of the react-datetime */
  border: 1px solid rgb(89, 128, 190) !important;
  box-shadow: none !important;
  /* stylelint-enable */
}
.portal-select-input .Select-control {
  height: 3em;
  border: 1px solid rgb(236, 236, 236);
}
.portal-select-input .Select-control .Select-placeholder {
  line-height: 3em;
}
.portal-select-input .Select-control .Select-value {
  line-height: 3em;
}
.portal-select-input .Select-control .Select-value .Select-value-label {
  line-height: 3em;
  font-weight: 700;
}
.portal-select-input .Select-control .Select-input > input {
  height: 2em;
  font-weight: 700;
}
.portal-select-input .Select-menu-outer {
  border: 1px solid rgb(89, 128, 190);
  border-top: none;
  position: inherit;
}
.portal-select-input .Select-option.is-focused {
  background-color: rgb(92, 178, 164);
  color: white;
  font-weight: 700;
}

.Select--multi .Select-control {
  overflow: inherit;
}
.Select--multi .Select-control .Select-placeholder {
  line-height: 3em;
}
.Select--multi .Select-control .Select-value {
  line-height: 2em;
}
.Select--multi .Select-control .Select-value .Select-value-label {
  line-height: 2em;
  color: rgb(92, 178, 164);
  font-weight: 700;
  background-color: rgba(92, 178, 164, 0.08);
}
.Select--multi .Select-control .Select-value .Select-value-icon {
  color: rgb(92, 178, 164);
  border-right: 1px solid rgb(92, 178, 164);
  background-color: rgba(92, 178, 164, 0.08);
}
.Select--multi .Select-control .Select-value .Select-value-icon:hover {
  font-weight: 700;
}
.Select--multi .Select-control .Select-input > input {
  height: 2em;
}

.pdi-status {
  display: flex;
  justify-content: space-between;
}

*, *::before, *::after {
  box-sizing: inherit;
}

::-webkit-scrollbar {
  display: none;
}

h2 {
  font-weight: 500;
}

a {
  text-decoration: none;
  color: black;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-family: "Roboto", sans-serif;
  color: rgb(134, 134, 134);
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

textarea {
  height: 5em;
}

.notification-modal-container {
  min-width: 300px;
}
.notification-modal-container.notification-remove-animation {
  animation: none;
}
.notification-modal-container.notification-remove-animation .rodal-zoom-enter {
  animation: none;
}
.notification-modal-container.rodal {
  right: 0;
  left: auto;
  width: 0%;
  height: 0%;
  max-width: 250px;
  z-index: 100 !important;
}
.notification-modal-container .rodal-mask {
  background: transparent;
  width: 0px;
}
.notification-modal-container .rodal-close::after, .notification-modal-container .rodal-close::before {
  background: rgb(228, 72, 58) !important;
}
.notification-modal-container .rodal-dialog {
  /* stylelint-disable */
  /* !important is needed here to overwrite the default styling of the rodal-dialog */
  position: fixed;
  width: 90% !important;
  max-width: 250px !important;
  height: auto !important;
  border-radius: 0.75em;
  /* stylelint-enable */
  display: flex;
  flex-direction: column;
  /* stylelint-disable */
  /* !important is needed here to overwrite the default styling of the rodal-dialog */
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: 1% !important;
  /* stylelint-enable */
  overflow: visible;
  padding: 0;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .notification-modal-container .rodal-dialog {
    top: 25%;
  }
}
.notification-modal-container .rodal-dialog .notification-icon {
  top: -20px;
  position: relative;
  display: flex;
  justify-content: center;
}
.notification-modal-container .rodal-dialog .notification-icon--background {
  top: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: rgb(64, 109, 170);
}
.notification-modal-container .rodal-dialog .notification-icon--background > svg {
  color: white !important;
}
.notification-modal-container .notification-modal-title,
.notification-modal-container .notification-modal-divider-title {
  border-bottom: 1px solid rgb(204, 204, 204);
  padding-bottom: 0.875em;
}
.notification-modal-container .notification-modal-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 0.875em;
  margin-right: 0.875em;
  margin-bottom: 0;
}
.notification-modal-container .notification-modal-title > div {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.75);
  font-size: 1.125em;
}
.notification-modal-container .notification-modal-content {
  overflow: auto;
}
.notification-modal-container .notification-modal-content .notification-visit-details {
  margin: 0.875em;
}
.notification-modal-container .notification-modal-container {
  display: flex;
  flex-direction: column;
}
.notification-modal-container .notification-visit-name-time {
  display: flex;
  justify-content: space-between;
  margin-left: 1em;
  margin-right: 1em;
}
.notification-modal-container .notification-visit-name > strong,
.notification-modal-container .notification-visit-time > strong,
.notification-modal-container .notification-study-name > strong {
  color: rgba(0, 0, 0, 0.75);
}
.notification-modal-container .notification-visit-name p,
.notification-modal-container .notification-visit-time p,
.notification-modal-container .notification-study-name p {
  margin-top: 0.5em;
}
.notification-modal-container .notification-study-name {
  margin-left: 1em;
  margin-right: 1em;
}
.notification-modal-container .virtual-visit-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.notification-modal-container .notification-error {
  margin-top: 0.5em;
  margin-left: 1em;
  margin-right: 1em;
}

.modal-container {
  min-width: 500px;
}
.modal-container .rodal-dialog {
  /* stylelint-disable */
  /* !important is needed here to overwrite the default styling of the rodal-dialog */
  width: 90% !important;
  max-width: 480px !important;
  max-height: 60% !important;
  height: auto !important;
  /* stylelint-enable */
  display: flex;
  flex-direction: column;
  /* stylelint-disable */
  /* !important is needed here to overwrite the default styling of the rodal-dialog */
  right: auto !important;
  /* stylelint-enable */
  overflow: auto;
  top: 50%;
  left: 50%;
  margin-left: -240px;
  transform: translate(0, -50%);
  bottom: auto;
  padding: 0;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .modal-container .rodal-dialog {
    top: 25%;
  }
}
.modal-container .modal-title,
.modal-container .modal-divider-title {
  color: rgb(64, 109, 170);
  text-transform: uppercase;
  border-bottom: 1px solid rgb(204, 204, 204);
  padding-bottom: 0.875em;
  margin-top: 0.875em;
}
.modal-container .modal-title {
  margin: 0.875em;
  margin-bottom: 0;
}
.modal-container .modal-content {
  overflow: auto;
}
.modal-container .modal-content > div {
  margin: 0.875em;
}

@media (min-width: 48em) {
  .navbar-container {
    display: flex;
  }
}

.main-container {
  overflow-x: auto;
  flex: 1;
  background-color: rgb(240, 240, 240);
  display: flex;
  flex-direction: column;
}

.router-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-container {
  background: rgb(70, 112, 180);
  display: none;
  overflow-y: auto;
}
@media (max-width: 47.99em) {
  .sidebar-container--active {
    display: block;
  }
}
@media (max-width: 47.99em) {
  .sidebar-container {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
  }
}
@media (min-width: 48em) {
  .sidebar-container {
    min-width: 250px;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.visit-overview:not(:first-child) > h2 {
  margin-top: 2em;
}

.site-overview-buttons {
  justify-content: flex-end;
}
.site-overview-buttons #button-export-all-pdrs {
  flex: inherit;
}

.sub-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: auto;
}

.tab-container,
.loading-container {
  padding: 0.625em;
  overflow-x: auto;
}
@media (min-width: 48em) {
  .tab-container,
  .loading-container {
    padding: 1.3125em 1.875em;
  }
}

.tab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.view-container {
  display: flex;
  flex: 1;
  min-height: 0;
}

.reactivation-container {
  display: flex;
  flex-direction: column;
}

.reactivation-row {
  display: flex;
  align-items: center;
}

.reactivation-label {
  flex: 1;
  padding-left: 5em;
}

.reactivation-value {
  flex: 2;
  font-size: xx-large;
  text-transform: uppercase;
  text-align: center;
}
.reactivation-value.pin {
  font-weight: 700;
}

.inverted-gray, .inverted-bordeaux, .inverted-green, .inverted-blue {
  background-color: transparent;
}
.inverted-gray:disabled, .inverted-bordeaux:disabled, .inverted-green:disabled, .inverted-blue:disabled {
  color: rgb(128, 128, 128);
  box-shadow: none;
  background-color: transparent;
  cursor: not-allowed;
}

.main-button {
  flex: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  outline: none;
  border: none;
  padding: 0.875em;
  cursor: pointer;
  justify-content: center;
}
.main-button > svg {
  margin-right: 0.625em;
  flex-shrink: 0;
}
.main-button > span {
  vertical-align: middle;
}
.main-button:disabled, .main-button:disabled:hover {
  color: rgb(128, 128, 128);
  background-color: rgb(214, 214, 214);
  cursor: not-allowed;
}

.blue {
  color: white;
  background-color: rgb(64, 109, 170);
}
.blue:focus, .blue:focus-within, .blue:hover, .blue.hover-active {
  background-color: rgb(89, 128, 190);
}

.green {
  color: white;
  background-color: rgb(91, 164, 171);
}
.green:focus, .green:focus-within, .green:hover, .green.hover-active {
  background-color: rgb(118, 179, 185);
}

.bordeaux {
  color: white;
  background-color: rgb(196, 90, 129);
}
.bordeaux:focus, .bordeaux:focus-within, .bordeaux:hover, .bordeaux.hover-active {
  background-color: rgb(196, 111, 142);
}

.inverted-blue {
  box-shadow: 0 0 0 1px rgb(49, 90, 168) inset;
  color: rgb(49, 90, 168);
}
.inverted-blue:focus, .inverted-blue:hover {
  box-shadow: 0 0 0 1px rgb(89, 128, 190) inset;
  color: rgb(89, 128, 190);
}
.inverted-blue:focus > svg, .inverted-blue:hover > svg {
  color: rgb(89, 128, 190);
}

.inverted-green {
  box-shadow: 0 0 0 1px rgb(73, 142, 131) inset;
  color: rgb(73, 142, 131);
}
.inverted-green:focus, .inverted-green:hover {
  box-shadow: 0 0 0 1px rgb(92, 178, 164) inset;
  color: rgb(92, 178, 164);
}
.inverted-green:focus > svg, .inverted-green:hover > svg {
  color: rgb(92, 178, 164);
}

.inverted-bordeaux {
  box-shadow: 0 0 0 1px rgb(196, 90, 129) inset;
  color: rgb(196, 90, 129);
}
.inverted-bordeaux:focus, .inverted-bordeaux:hover {
  box-shadow: 0 0 0 1px rgb(196, 111, 142) inset;
  color: rgb(196, 111, 142);
}
.inverted-bordeaux:focus > svg, .inverted-bordeaux:hover > svg {
  color: rgb(196, 111, 142);
}

.inverted-gray {
  box-shadow: 0 0 0 1px rgb(128, 128, 128) inset;
  color: rgb(128, 128, 128);
}
.inverted-gray:focus, .inverted-gray:hover {
  box-shadow: 0 0 0 1px rgb(100, 100, 100) inset;
  color: rgb(100, 100, 100);
}
.inverted-gray:focus > svg, .inverted-gray:hover > svg {
  color: rgb(100, 100, 100);
}

.main-button-group {
  display: flex;
  margin-top: 0.875em;
  flex-wrap: wrap;
}
.main-button-group > .main-button {
  margin: 0.3125em;
}
.main-button-group > .main-button:first-child {
  margin-left: 0;
}
.main-button-group > .main-button:last-child {
  margin-right: 0;
}

.collapsepicker-header, .collapsepicker-selector {
  padding: 0.625em;
  display: flex;
  align-items: center;
}

.green-picker.collapsepicker-container {
  background: rgb(118, 179, 185);
}
.green-picker .collapsepicker-item {
  background: rgb(91, 164, 171);
}
.green-picker .collapsepicker-item.selected {
  background: rgb(118, 179, 185);
}
.green-picker .collapsepicker-item:focus, .green-picker .collapsepicker-item:hover {
  background: rgb(118, 179, 185);
}
.green-picker .collapsepicker-selector {
  background: rgb(92, 178, 164);
}
.green-picker .collapsepicker-selector:focus, .green-picker .collapsepicker-selector:hover {
  background: rgb(118, 179, 185);
}
.green-picker .collapsepicker-header {
  background: rgb(73, 142, 131);
}

.blue-picker.collapsepicker-container {
  background: rgb(89, 128, 190);
}
.blue-picker .collapsepicker-item {
  background: rgb(64, 109, 170);
}
.blue-picker .collapsepicker-item.selected {
  background: rgb(89, 128, 190);
}
.blue-picker .collapsepicker-item:focus, .blue-picker .collapsepicker-item:hover {
  background: rgb(89, 128, 190);
}
.blue-picker .collapsepicker-selector {
  background: rgb(79, 120, 181);
}
.blue-picker .collapsepicker-selector:focus, .blue-picker .collapsepicker-selector:hover {
  background: rgb(89, 128, 190);
}
.blue-picker .collapsepicker-header {
  background: rgb(43, 84, 147);
}

.collapsepicker-container {
  color: white;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.collapsepicker-container-open {
  flex-shrink: 1;
  overflow-y: auto;
  min-height: 118px;
}

.collapsepicker-items {
  overflow-y: auto;
}

.collapsepicker-item {
  display: flex;
  font-size: 0.875em;
}
.collapsepicker-item--preview,
.collapsepicker-item > a {
  color: white;
  padding: 0.714em;
  flex: 1;
}
.collapsepicker-item--preview {
  padding-left: calc(0.714em - 3px);
}
.collapsepicker-item:focus, .collapsepicker-item:hover, .collapsepicker-item.selected {
  border-left: 3px solid white;
}
.collapsepicker-item:focus > a, .collapsepicker-item:hover > a, .collapsepicker-item.selected > a {
  padding-left: calc(0.714em - 3px);
}

.collapsepicker-selector {
  cursor: pointer;
  justify-content: space-between;
  flex-shrink: 0;
}

.collapsepicker-header {
  font-weight: 700;
  flex-shrink: 0;
}

/* over react-datetime styling */
.rdt .rdtPicker {
  background: rgb(49, 90, 168);
  color: white;
  border-radius: 3px;
  border: 0;
}
.rdt .rdtPicker tr th:hover,
.rdt .rdtPicker .rdtDays td:hover,
.rdt .rdtPicker .rdtBtn:hover {
  /* stylelint-disable */
  /* !important is needed here to overwrite the default styling of the react-datetime */
  background: rgb(89, 128, 190) !important;
  /* stylelint-enable */
}
.rdt .rdtPicker .rdtTime td {
  cursor: initial;
}
.rdt .rdtPicker th {
  color: white;
  vertical-align: middle;
}
.rdt .rdtPicker td,
.rdt .rdtPicker th {
  font-size: 0.667em;
  padding: initial;
  /* stylelint-disable */
  /* !important is needed here to overwrite the default styling of the react-datetime */
  text-align: center !important;
  /* stylelint-enable */
}

/* specific visit date picker style */
.portal-date-picker-container,
.table-date-picker-container,
.table-date-picker-container-past {
  position: relative;
  border-radius: 3px;
  padding: 0 0.25em;
  color: rgb(100, 100, 100);
}
.portal-date-picker-container > svg,
.table-date-picker-container > svg,
.table-date-picker-container-past > svg {
  position: absolute;
  right: 0.3125em;
  top: 0.3125em;
}

.portal-date-picker > input,
.table-date-picker > input,
.table-date-picker-past > input {
  width: 100%;
  border: none;
  padding: 0.3125em 0;
}
.portal-date-picker > input:focus,
.table-date-picker > input:focus,
.table-date-picker-past > input:focus {
  outline: none;
}

/* specific visit date picker style */
.table-date-picker-container-past,
.table-date-picker-past > input {
  color: rgb(134, 134, 134);
}

.table-date-picker-container,
.table-date-picker-container-past,
.table-date-picker > input,
.table-date-picker-past > input {
  background-color: rgb(204, 204, 204);
}

.table-date-picker-container,
.table-date-picker-container-past {
  margin-left: -0.25em;
  max-width: 300px;
}

.portal-date-picker-container,
.portal-date-picker > input {
  background-color: rgb(249, 249, 249);
}

.portal-date-picker .rdtPicker {
  margin-bottom: 1.3125em;
}
.portal-date-picker > input {
  padding: 0.8em 0;
}

.table-date-picker-container.disabled {
  background-color: rgb(214, 214, 214);
  color: rgb(134, 134, 134);
  cursor: not-allowed;
}

.table-date-picker.disabled {
  pointer-events: none;
}
.table-date-picker.disabled input {
  color: rgb(100, 100, 100);
  background-color: rgb(214, 214, 214);
}

.icon--clickable {
  cursor: "pointer";
}

.loading-box {
  /* stylelint-disable */
  /* stylelint-enable */
}
@-webkit-keyframes dots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: rgb(120, 120, 120);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgba(0, 0, 0, 0);
  }
  80%, 100% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgb(120, 120, 120);
  }
}
@-moz-keyframes dots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: rgb(120, 120, 120);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgba(0, 0, 0, 0);
  }
  80%, 100% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgb(120, 120, 120);
  }
}
@keyframes dots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: rgb(120, 120, 120);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgba(0, 0, 0, 0);
  }
  80%, 100% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgb(120, 120, 120);
  }
}
@-o-keyframes dots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: rgb(120, 120, 120);
    text-shadow: 5px 0 0 rgba(0, 0, 0, 0), 10px 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgba(0, 0, 0, 0);
  }
  80%, 100% {
    text-shadow: 5px 0 0 rgb(120, 120, 120), 10px 0 0 rgb(120, 120, 120);
  }
}
.loading-box-animated::after {
  content: ".";
  /* stylelint-disable */
  -webkit-animation: dots 1.5s steps(5, end) infinite;
  -moz-animation: dots 1.5s steps(5, end) infinite;
  -o-animation: dots 1.5s steps(5, end) infinite;
  animation: dots 1.5s steps(5, end) infinite;
  /* stylelint-enable */
}

.logout-button {
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  text-decoration: none;
  background: none;
  border-left: 1px solid rgb(210, 210, 210);
  cursor: pointer;
  /* needs to be the same as 'margin-right' under '> svg' AND also the same as 'padding-right' under '&--name' in ProfileBadge.scss */
  padding: 0 0.625em;
}
.logout-button > svg {
  margin-right: 0.625em;
  color: white;
}
@media (min-width: 48em) {
  .logout-button > svg {
    color: rgb(64, 109, 170);
  }
}
@media (min-width: 48em) {
  .logout-button:hover, .logout-button:hover > svg {
    color: rgb(89, 128, 190);
  }
}

.main-input-title {
  color: rgb(120, 120, 120);
  margin-top: 1.3125em;
  margin-bottom: 0.3125em;
}

.main-input-error {
  color: rgb(209, 25, 33);
}

.main-input-textarea, .main-input-inputfield {
  width: 100%;
  max-width: 100%;
  border: 1px solid rgb(236, 236, 236);
  border-radius: 5px;
  font-size: 1em;
  font-weight: 700;
  outline: none;
}
.main-input-textarea:focus, .main-input-inputfield:focus {
  border: 1px solid rgb(89, 128, 190);
}
.main-input-textarea:disabled, .main-input-inputfield:disabled {
  background-color: rgb(214, 214, 214);
  color: rgb(128, 128, 128);
}
.main-input-textarea.with-min-width, .main-input-inputfield.with-min-width {
  min-width: 150px;
}
.main-input-textarea {
  min-height: 100px;
  font-family: inherit;
}
.main-input-inputfield {
  height: 3em;
  background-color: rgb(249, 249, 249);
  box-sizing: border-box;
  padding-left: 0.625em;
  box-shadow: none;
}

::placeholder {
  color: rgb(175, 175, 175);
  opacity: 1;
}

.navbar-brand {
  color: white;
  background-color: rgb(49, 90, 168);
  display: flex;
  align-items: center;
}
.navbar-brand__tagline {
  display: none;
}
@media (min-width: 48em) {
  .navbar-brand__tagline {
    display: block;
  }
}
.navbar-brand__img {
  width: 212px;
  margin: 10px;
}
@media (min-width: 48em) {
  .navbar-brand {
    min-width: 250px;
    max-width: 250px;
  }
}

.navbar-header {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3125em;
}
.navbar-header__title {
  flex: 1;
  font-size: 1.125em;
  font-weight: 400;
  color: rgb(53, 75, 150);
}
.navbar-header__title span {
  color: black;
}
@media (min-width: 48em) {
  .navbar-header__title {
    padding-left: 1.5em;
    margin: 0;
  }
}

.c-patient {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.c-patient__buttons {
  margin-top: 0;
  flex-shrink: 0;
}
@media (min-width: 48em) {
  .c-patient__buttons {
    justify-content: flex-end;
  }
  .c-patient__buttons > button {
    flex: inherit;
  }
}

.visit-label {
  width: 200px;
}

.datepicker-label {
  width: 350px;
}

.virtual-visit-label {
  width: 300px;
}

.profile-badge {
  color: rgb(90, 90, 90);
  font-size: 0.875em;
  display: flex;
  align-items: center;
}
.profile-badge--name {
  padding-right: 0.625em;
}
@media (max-width: 47.99em) {
  .profile-badge {
    position: fixed;
    color: white;
    top: 1.5em;
    right: 0;
  }
}

.radio-container {
  display: flex;
  flex-direction: column;
}
.radio-container .radio-button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 1em;
  cursor: pointer;
}
.radio-container .radio-button-container .radio-button {
  margin-right: 1em;
  outline: none;
}

.blue-button {
  background: rgb(79, 120, 181);
}
.blue-button:focus, .blue-button:hover {
  background: rgb(89, 128, 190);
}

.green-button {
  background: rgb(92, 178, 164);
}
.green-button:focus, .green-button:hover {
  background: rgb(118, 179, 185);
}

.sidebar-button-content {
  width: 100%;
  align-items: center;
  padding: 0.625em;
  pointer-events: all;
}
.sidebar-button-content.disabled {
  color: rgb(128, 128, 128);
  background-color: rgb(214, 214, 214);
  pointer-events: none;
}

.sidebar-button {
  align-items: center;
  display: flex;
  color: white;
  flex-shrink: 0;
  pointer-events: all;
  cursor: pointer;
}
.sidebar-button span {
  padding-left: 2em;
  flex: 1;
}
.sidebar-button.disabled {
  cursor: not-allowed;
}

.c-sidebar-toggle {
  width: 32px;
  height: 32px;
  padding: 0.3125em;
  margin-right: 0.625em;
  display: inline-block;
  cursor: pointer;
  background: rgb(53, 75, 150);
}
@media (min-width: 48em) {
  .c-sidebar-toggle {
    display: none;
  }
}

.tabbar {
  display: flex;
  background: rgb(226, 226, 226);
}
.tabbar__item {
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  flex-shrink: 0;
}
.tabbar__item--active {
  border-color: rgb(128, 128, 128);
}
.tabbar__item:hover, .tabbar__item--active {
  font-weight: 700;
}
.tabbar__item-link {
  padding: 1.3125em 1.125em;
  padding-bottom: calc(1.3125em - 3px);
  font-size: 0.875em;
  white-space: nowrap;
}
.tabbar__item-link:focus {
  font-weight: 700;
}
@media (min-width: 48em) {
  .tabbar__item-link {
    font-size: 1em;
  }
}

.tabbar__group {
  display: flex;
}
.tabbar__group:first-child {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.tab-bar-dropdown {
  cursor: pointer;
  position: relative;
}
.tab-bar-dropdown:focus span, .tab-bar-dropdown:hover span {
  font-weight: 700;
}

.tab-bar-dropdown-title {
  display: flex;
  align-items: center;
  color: black;
  padding: 0 0.625em;
  height: 100%;
}
.tab-bar-dropdown-title span {
  display: none;
  padding-left: 0.3125em;
}
@media (min-width: 48em) {
  .tab-bar-dropdown-title span {
    display: block;
  }
}

.tab-bar-dropdown-menu {
  position: absolute;
  right: 0;
  z-index: 1;
  width: 140px;
  background: white;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 3px 7px rgb(204, 204, 204);
}

.tab-bar-dropdown-menu-wrapper {
  cursor: pointer;
}
.tab-bar-dropdown-menu-wrapper.disabled {
  cursor: not-allowed;
}

.tab-bar-dropdown-menu-item {
  font-size: 0.875em;
  color: rgb(90, 90, 90);
  padding: 1em;
  pointer-events: all;
  background: white;
}
.tab-bar-dropdown-menu-item:focus, .tab-bar-dropdown-menu-item:hover {
  color: rgb(209, 25, 33);
  font-weight: 700;
}
.tab-bar-dropdown-menu-item.disabled {
  background: rgb(214, 214, 214);
}
.tab-bar-dropdown-menu-item.disabled:focus, .tab-bar-dropdown-menu-item.disabled:hover {
  color: rgb(90, 90, 90);
  font-weight: normal;
}

.visit-selector--container {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
}

.toggle-virtual-visit-buttons {
  max-width: 190px;
  max-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2em;
}

.toggle-on-site-button,
.toggle-virtual-button {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  border-top: 1px solid rgba(128, 128, 128, 0.3);
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  display: flex;
  align-items: center;
  padding: 0.3em 0.34em 0.3em 0.34em;
}
.toggle-on-site-button svg,
.toggle-virtual-button svg {
  color: rgb(64, 109, 170) !important;
  background-color: rgb(240, 240, 240);
}

.toggle-on-site-button:hover,
.toggle-virtual-button:hover {
  font-weight: bold;
}

.toggle-on-site-button--active:hover,
.toggle-virtual-button--active:hover {
  font-weight: normal;
}

.toggle-on-site-button {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-left: 1px solid rgba(128, 128, 128, 0.3);
}
.toggle-on-site-button svg {
  padding-left: 0.5em;
}

.toggle-virtual-button {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-right: 1px solid rgba(128, 128, 128, 0.3);
}

.toggle-on-site-button__text,
.toggle-virtual-button__text {
  padding-left: 0.5em;
  color: rgb(64, 109, 170);
}

.toggle-virtual-button__text {
  padding-right: 0.5em;
}

.toggle-virtual-button__text::before {
  content: "Virtual";
  display: block;
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.toggle-on-site-button__text::before {
  content: "On Site";
  display: block;
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.toggle-on-site-button--active,
.toggle-virtual-button--active {
  cursor: default;
  pointer-events: none;
  background-color: rgb(64, 109, 170);
  box-shadow: 0 0 1px 1px inset rgba(0, 0, 0, 0.5);
}
.toggle-on-site-button--active svg,
.toggle-virtual-button--active svg {
  color: rgb(240, 240, 240) !important;
  background-color: rgb(64, 109, 170);
}

.toggle-on-site-button__text--active,
.toggle-virtual-button__text--active {
  color: rgb(240, 240, 240);
}

.toggle-virtual-visit-buttons--archived {
  pointer-events: none;
}
.toggle-virtual-visit-buttons--archived .toggle-on-site-button svg,
.toggle-virtual-visit-buttons--archived .toggle-virtual-button svg {
  color: rgba(128, 128, 128, 0.5) !important;
}
.toggle-virtual-visit-buttons--archived .toggle-on-site-button .toggle-on-site-button__text,
.toggle-virtual-visit-buttons--archived .toggle-on-site-button .toggle-virtual-button__text,
.toggle-virtual-visit-buttons--archived .toggle-virtual-button .toggle-on-site-button__text,
.toggle-virtual-visit-buttons--archived .toggle-virtual-button .toggle-virtual-button__text {
  color: rgba(128, 128, 128, 0.5);
}
.toggle-virtual-visit-buttons--archived .toggle-on-site-button--active,
.toggle-virtual-visit-buttons--archived .toggle-virtual-button--active {
  background-color: rgb(214, 214, 214);
  box-shadow: 0 0 0.5px 0.5px inset rgb(128, 128, 128);
  color: rgb(128, 128, 128);
}
.toggle-virtual-visit-buttons--archived .toggle-on-site-button--active svg,
.toggle-virtual-visit-buttons--archived .toggle-virtual-button--active svg {
  color: rgb(128, 128, 128) !important;
  background-color: rgb(214, 214, 214);
}
.toggle-virtual-visit-buttons--archived .toggle-on-site-button--active .toggle-on-site-button__text--active,
.toggle-virtual-visit-buttons--archived .toggle-on-site-button--active .toggle-virtual-button__text--active,
.toggle-virtual-visit-buttons--archived .toggle-virtual-button--active .toggle-on-site-button__text--active,
.toggle-virtual-visit-buttons--archived .toggle-virtual-button--active .toggle-virtual-button__text--active {
  color: rgb(128, 128, 128);
}

.toggle-virtual-visit-label {
  display: flex;
  align-items: center;
  margin-left: 0.3em;
}
.toggle-virtual-visit-label div {
  margin-left: 0.5em;
}

.toggle-on-site-visit-label {
  display: flex;
  align-items: center;
  margin-left: 0.2em;
}
.toggle-on-site-visit-label div {
  margin-left: 0.5em;
}

.virtual-visit-button--archived {
  cursor: not-allowed;
}

.virtual-visit-button {
  display: flex;
  background-color: rgb(91, 164, 171);
  border-radius: 0.25em;
  padding: 0.25em;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.virtual-visit-button > svg {
  color: white !important;
  padding-right: 0.5em;
}
.virtual-visit-button .virtual-visit-button-text {
  color: white;
}
.virtual-visit-button .virtual-visit-button-text.disabled {
  color: rgb(128, 128, 128);
}
.virtual-visit-button.disabled {
  background-color: rgb(214, 214, 214);
  pointer-events: none;
}
.virtual-visit-button.disabled > svg {
  color: rgb(128, 128, 128) !important;
}

.o-hint-text {
  color: rgb(120, 120, 120);
  font-size: 1.875em;
  font-weight: 400;
}
.o-hint-text.black {
  color: black;
}
.o-hint-text.error {
  color: rgb(209, 25, 33);
}
.o-hint-text p {
  margin: 0;
}
.o-hint-text--title {
  font-size: 1em;
  font-weight: 700;
}
.o-hint-text--details {
  font-size: 0.8em;
}
.o-hint-text ul {
  margin: 0;
}

.o-hint-flex {
  display: flex;
  flex-direction: column;
}
.o-hint-flex .o-hint-text--title {
  text-align: center;
}
.o-hint-flex .o-hint-text--details {
  margin-top: 0.875em;
  text-align: center;
}

.o-table {
  overflow-x: auto;
  flex: 1;
}
.o-table table {
  border-collapse: collapse;
  width: 100%;
}
.o-table td {
  border-bottom: 1px solid rgb(175, 175, 175);
}
.o-table th {
  vertical-align: bottom;
  text-align: left;
  border-bottom: 3px solid rgb(175, 175, 175);
  padding: 0.625em 0.3125em;
  white-space: nowrap;
}
.o-table.azure td {
  border-bottom: 1px solid rgb(64, 109, 170);
}
.o-table.azure th {
  border-bottom: 3px solid rgb(64, 109, 170);
}
.o-table.white td {
  border-bottom: 1px solid white;
}
.o-table.white th {
  border-bottom: 3px solid white;
}
.o-table.daily-tasks-table td {
  white-space: normal;
}
.o-table.daily-tasks-table {
  margin-bottom: 4em;
}
.o-table.pdi-status-table th:first-of-type {
  width: 33%;
}
.o-table.pdi-status-table th:last-of-type {
  width: 16.5%;
}
.o-table.pdi-status-table td {
  white-space: normal;
}
.o-table.pdi-status-table {
  margin-bottom: 4em;
}
.o-table.visit-forms {
  flex: unset;
  width: 100%;
}
.o-table.visit-forms td {
  white-space: normal;
}
.o-table.visit-forms.small {
  width: 20px;
}
.o-table.screening {
  flex: unset;
  margin-bottom: 2em;
  min-height: 140px;
}
.o-table.visits {
  min-height: 420px;
}
.o-table.site-patients-overview td {
  width: 16.5%;
  height: 1.75em;
}
.o-table.site-patients-overview .patient-id-column {
  width: 5%;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .o-table {
    overflow-x: initial;
  }
}
.o-table__label > span, .o-table__button > span {
  vertical-align: middle;
}
.o-table__label > svg, .o-table__button > svg {
  margin-right: 0.625em;
}
.o-table__button {
  margin: 0;
  padding: 0;
  box-shadow: none;
}
.o-table__button:focus, .o-table__button:hover {
  box-shadow: none;
}
.o-table__event td {
  white-space: normal;
  padding: 0.625em;
}
.o-table__event .container-events__details {
  display: block;
  padding-bottom: 0.25em;
}
.o-table__event .container-events__details:last-child {
  padding-bottom: 0;
}
.o-table__event .wrapper-events-cell__details:before {
  content: "";
  display: block;
  margin: 0.3125em 0 0.3125em 1.125em;
  border-top: 1px solid rgb(175, 175, 175);
  width: 95%;
}
.o-table__event .wrapper-events-cell__type {
  padding-bottom: 0.3125em;
}
.o-table__event .wrapper-events-cell__details {
  display: block;
  padding-bottom: 0.25em;
}
.o-table__event .events-cell__details {
  display: block;
  margin-left: 1.125em;
}
.o-table__event .events-cell__registeredon,
.o-table__event .events-cell__registeredfor {
  vertical-align: top;
  padding-top: 0.625em;
}
.o-table__label {
  display: flex;
  align-items: center;
  color: rgb(158, 158, 158);
}
.o-table__title {
  color: rgb(53, 75, 150);
  font-size: 1.125em;
}
.o-table__item {
  /* stylelint-disable */
  /* stylelint-enable */
}
.o-table__item--heading {
  font-weight: 700;
  padding: 0.625em 0;
}
.o-table__item--collapse {
  cursor: pointer;
}
.o-table__item--collapse td {
  padding: 0.625em 0;
}
.o-table__item--collapse td:first-child > svg {
  margin-right: 0.625em;
  margin-top: -0.3125em;
}
.o-table__item--indent {
  padding: 1.125em 5em;
  color: rgb(158, 158, 158);
}
.o-table__item--indent td {
  border-color: rgb(210, 210, 210);
}
.o-table__item--reset {
  padding: 0;
  border: 0 !important;
  box-shadow: 0 !important;
}
.o-table--minify td {
  white-space: 400;
  padding: 0.25em 0;
}
.o-table .events-header__registeredon,
.o-table .events-header__registeredfor {
  min-width: 150px;
}

td {
  white-space: nowrap;
  padding: 0.3125em;
}

/* basic margin classes */
.u-margin--all {
  margin: 0.3125em;
}

.u-margin--horizontal {
  margin: 0 0.3125em;
}

.u-margin--vertical {
  margin: 0.3125em 0;
}

.u-margin--top {
  margin-top: 0.875em;
}

.u-margin--bottom {
  margin-bottom: 0.875em;
}

.u-margin--zero {
  margin: 0;
}

/* basic padding classes */
.u-padding--all {
  padding: 0.3125em;
}

.u-padding--horizontal {
  padding: 0 0.3125em;
}

.u-padding--vertical {
  padding: 0.3125em 0;
}

.u-padding--top {
  padding-top: 0.875em;
}

.u-padding--bottom {
  padding-bottom: 0.875em;
}

.u-padding--zero {
  padding: 0;
}

.u-text--small {
  font-size: 0.875em;
}

.u-text--bold {
  font-weight: 700;
}

.u-text--wordwrap {
  white-space: pre-wrap;
  white-space: -pre-wrap;
  word-wrap: break-word;
}

.u-text--uppercased {
  text-transform: uppercase;
}

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

.u-text--underlined {
  text-decoration: underline;
}

#root {
  min-width: 480px;
  width: 100%;
  height: 100%;
}
#root > div {
  height: 100%;
}

iframe {
  border: none;
}

strong {
  font-weight: 700;
}

a:focus,
div:focus,
button:focus {
  outline: none;
}

.container-empty {
  flex-grow: 1;
}

/*# sourceMappingURL=project.css.map */


/*# sourceMappingURL=main.8150fa35.css.map*/