/* 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;
}

@charset "UTF-8";
@font-face {
  font-family: Roboto;
  src: url(/admin/094b548d8134a48bd307.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/f5581866d02eb43cdfe6.ttf) format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/60dfafa8adba1b0a72c4.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/bda17116a17909f71dbf.ttf) format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/a31484be96dd2a0220d1.ttf) format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/c83df298a03b2a1b936a.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/be598c7ddfcdd13cb923.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/b31a1c05502050142ca7.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/ff3fa112b4e1a1b7b4bd.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/65ae74fb3701ab6aba54.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/105ac227ce89f2e86ea7.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url(/admin/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: relative;
}
.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;
}

.dropdown-select {
  min-width: 140px;
  padding: 1.6px;
}
.dropdown-select .Select-menu-outer {
  position: absolute;
  width: 98%;
  left: 1px;
  top: 97%;
}

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

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

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;
}

.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;
}
.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%;
  }
}

.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;
}

.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: 1px rgb(214, 214, 214) inset;
  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;
  color: white;
  cursor: pointer;
  justify-content: center;
}
.main-button > svg {
  margin-right: 0.625em;
  flex-shrink: 0;
}
.main-button.blue {
  background-color: rgb(64, 109, 170);
}
.main-button.blue:focus, .main-button.blue:hover, .main-button.blue.hover-active {
  background-color: rgb(89, 128, 190);
}
.main-button.green {
  background-color: rgb(91, 164, 171);
  font-size: 1em;
}
.main-button.green:focus, .main-button.green:hover, .main-button.green.hover-active {
  background-color: rgb(118, 179, 185);
}
.main-button.bordeaux {
  background-color: rgb(196, 90, 129);
}
.main-button.bordeaux:focus, .main-button.bordeaux:focus-within, .main-button.bordeaux:hover, .main-button.bordeaux.hover-active {
  background-color: rgb(196, 111, 142);
}
.main-button > span {
  vertical-align: middle;
}
.main-button:disabled, .main-button:disabled:hover {
  color: rgb(128, 128, 128);
  background-color: rgb(214, 214, 214);
  box-shadow: 0 0 0 1px rgb(214, 214, 214) inset;
  cursor: not-allowed;
}

.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);
}

#button-add-visit {
  width: 90%;
}

.main-button-group {
  display: flex;
  margin-top: 0.875em;
  flex-wrap: wrap;
}
@media (min-width: 48em) {
  .main-button-group.align-right {
    justify-content: flex-end;
  }
  .main-button-group.align-right > button {
    flex: inherit;
  }
}
.main-button-group > .main-button {
  margin-left: 0.3125em;
  margin-right: 0.3125em;
}
.main-button-group > .main-button:first-child {
  margin-left: 0;
}
.main-button-group > .main-button:last-child {
  margin-right: 0;
}
@media (min-width: 48em) {
  .main-button-group.planning-buttons {
    justify-content: flex-end;
  }
  .main-button-group.planning-buttons > button {
    flex: inherit;
    min-width: calc(25% - 0.3125em);
  }
}
@media (min-width: 48em) {
  .main-button-group.fasttrack-button {
    justify-content: flex-end;
  }
  .main-button-group.fasttrack-button > button {
    flex: inherit;
    min-width: calc(20% - 0.3125em);
  }
}

.main-checkbox > label > input {
  margin-right: 0.3125em;
  transform: scale(1.2);
}

.collapsepicker-header, .collapsepicker-selecter {
  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-selecter {
  background: rgb(92, 178, 164);
}
.green-picker .collapsepicker-selecter:focus, .green-picker .collapsepicker-selecter: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-selecter {
  background: rgb(79, 120, 181);
}
.blue-picker .collapsepicker-selecter:focus, .blue-picker .collapsepicker-selecter: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-selecter {
  cursor: pointer;
  justify-content: space-between;
  flex-shrink: 0;
}

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

.country-card {
  background-color: white;
  padding: 1em;
  box-shadow: 3px 3px 7px rgb(204, 204, 204);
  margin-bottom: 1em;
}
.country-card--empty {
  margin-top: 1em;
  padding: 0.625em 0 0.625em 0.3125em;
}
.country-card--titlebar {
  padding-bottom: 1em;
  border-bottom: 1px solid rgb(204, 204, 204);
  display: flex;
  align-items: center;
}
.country-card--titlebar > svg {
  margin-right: 0.625em;
  color: rgb(204, 204, 204);
  flex-shrink: 0;
}
.country-card--titlebar .virtual-visit-label {
  margin-right: 0.5em;
}
.country-card--titlebar .switch-virtual-visit {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.country-card-list-table {
  table-layout: fixed;
}
.country-card-list-table tbody tr:hover td:not(:first-child) {
  font-weight: 700;
}
.country-card-list-table .country-card-list-icon svg {
  color: rgb(210, 210, 210);
  margin-top: -0.3125em;
}
.country-card-list-table .country-card-list-icon svg:hover {
  color: rgb(128, 128, 128);
}
.country-card-list-table .investigator-list-header-delete,
.country-card-list-table .investigator-list-row-delete,
.country-card-list-table .investigator-list-header-edit,
.country-card-list-table .investigator-list-row-edit {
  width: 1.875em;
  min-width: 1.875em;
  max-width: 1.875em;
}
.country-card-list-table .site-list-header-edit,
.country-card-list-table .site-list-header-delete,
.country-card-list-table .site-list-row-edit,
.country-card-list-table .site-list-row-delete {
  width: 1em;
  min-width: 1em;
  max-width: 1em;
}
.country-card-list-table .site-list-header-siteid,
.country-card-list-table .site-list-row-siteid {
  padding-left: 1em;
  text-align: left;
}
.country-card-list-table .site-list-header-location,
.country-card-list-table .site-list-row-location,
.country-card-list-table .site-list-header-timezone,
.country-card-list-table .site-list-row-timezone {
  padding-left: 0.8em;
  width: 25%;
  text-align: left;
}
.country-card-list-table .site-list-header-patientrange,
.country-card-list-table .site-list-row-patientrange {
  padding-left: 1.875em;
  width: 30%;
  text-align: left;
}
.country-card-list-table .investigator-list-header-investigator,
.country-card-list-table .investigator-list-row-investigator {
  padding-left: 0.3125em;
  text-align: left;
}
.country-card-list-table .investigator-list-header-sitepermissions,
.country-card-list-table .investigator-list-row-sitepermissions {
  padding-left: 0.3125em;
  text-align: left;
}

/* overwrite 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 */
}

.modal-date-picker .rdtPicker {
  margin-bottom: 1.3125em;
}
.modal-date-picker > input {
  width: 100%;
  border: none;
  padding: 0.8em;
  background-color: rgb(249, 249, 249);
}
.modal-date-picker > input:focus {
  outline: none;
}

.icon--clickable {
  cursor: pointer;
}
.icon--clickable.disabled {
  pointer-events: none;
}
.icon-disabled-wrapper {
  width: 20px;
  cursor: not-allowed;
}

#button-delete-visit {
  float: right;
}

.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);
  }
}

.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 */
}

.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.visit-offset, .main-input-inputfield.visit-offset {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.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;
}

.main-input-group-items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.main-input-group-items .main-input {
  margin-right: 2em;
}
.main-input-group-items .main-input:last-child {
  margin-right: 0;
}
.main-input-group-items .main-input-title {
  margin-top: 0;
}

.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;
}
@media (min-width: 48em) {
  .navbar-header__title {
    padding-left: 1.5em;
    margin: 0;
  }
}
.navbar-header__name, .navbar-header__id {
  margin-right: 0.3125em;
}
.navbar-header__name {
  color: black;
}
.navbar-header__id {
  color: rgb(53, 75, 150);
}
.navbar-header__status {
  color: rgb(128, 128, 128);
  font-size: 0.8em;
}

.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;
  }
}

.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 {
  display: flex;
  padding: 0.625em;
  color: white;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-button span {
  padding-left: 2em;
  flex: 1;
}

.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;
  }
}

.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);
  pointer-events: all;
  padding: 1em;
  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;
}

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

.upload-download-buttons .main-button {
  padding-bottom: 1.3125em;
  padding-top: 1.3125em;
}

.upload-dropzone {
  display: flex;
}
.upload-dropzone span {
  text-align: center;
}
.upload-dropzone.disabled {
  cursor: not-allowed;
  background-color: rgb(214, 214, 214);
  color: rgb(134, 134, 134);
}
.upload-dropzone.disabled:hover {
  background-color: rgb(214, 214, 214);
}

.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;
}

.table-o {
  overflow-x: auto;
  flex: 1;
  /* planning table specific styling */
  /* milestones table specific styling */
}
.table-o table {
  border-collapse: collapse;
  width: 100%;
}
.table-o.planning td, .table-o.milestones td {
  border-bottom: 1px solid rgb(175, 175, 175);
}
.table-o.planning th, .table-o.milestones th {
  text-align: left;
  border-bottom: 3px solid rgb(175, 175, 175);
  padding: 0.625em 0.3125em;
  /* stylelint-disable */
  /* stylelint-enable */
}
.table-o.planning th.is-sortable::after, .table-o.milestones th.is-sortable::after {
  content: "↕";
  color: rgb(175, 175, 175);
}
.table-o.planning th.is-sorted::after, .table-o.milestones th.is-sorted::after {
  color: rgb(53, 75, 150);
}
.table-o.planning th.is-sorted.ascending::after, .table-o.milestones th.is-sorted.ascending::after {
  content: "↑";
}
.table-o.planning th.is-sorted.descending::after, .table-o.milestones th.is-sorted.descending::after {
  content: "↓";
}
.table-o.planning td,
.table-o.planning th {
  width: 50%;
}
.table-o.planning td ~ td,
.table-o.planning th ~ th {
  width: 25%;
}
.table-o.milestones {
  min-height: 300px;
}
.table-o.milestones .study-filter,
.table-o.milestones .program-filter,
.table-o.milestones .status-filter {
  padding: 0 0.25em;
}
@media (max-width: 119.99em) {
  .table-o.milestones .study-filter,
  .table-o.milestones .program-filter,
  .table-o.milestones .status-filter {
    width: 150px;
  }
}
.table-o.milestones .align-right {
  text-align: right;
}
.table-o.milestones .date {
  width: 130px;
}
@media (min-width: 48em) {
  .table-o.milestones .date {
    white-space: nowrap;
  }
}
.table-o.milestones .id {
  width: 30px;
  text-align: center;
}
.table-o.milestones .button {
  width: 35px;
}
.table-o__clickable-icon {
  margin: 0;
  padding: 0;
  border: none;
  color: rgb(49, 90, 168);
  cursor: pointer;
}
.table-o__clickable-icon:hover {
  color: rgb(89, 128, 190);
}
.table-o__clickable-icon:hover > svg {
  color: rgb(89, 128, 190);
}
.table-o th {
  vertical-align: bottom;
  white-space: nowrap;
}

td {
  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;
}

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


/*# sourceMappingURL=main.d0ba4681.css.map*/