/* Tell the browser which scheme its own chrome should use.
 *
 * Without this, native UI — scrollbars above all — keeps painting light on a
 * dark page, which is why a bright white scrollbar ran down the side of the
 * dark-theme chat panel. Styling ::-webkit-scrollbar per component would fix
 * one place at a time and miss form controls, spinners and the rest; this is
 * one declaration that covers all of them, in every browser.
 *
 * Keyed off the same attribute ThemeProvider already sets from redux state. */
:root {
  color-scheme: light;
}

[data-mantine-color-scheme='dark'] {
  color-scheme: dark;
}

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

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  background-image: url('/images/public-background-overlay'),
    url('/images/public-background.png');
  background-size: cover, cover;
  overscroll-behavior: none; /* Not yet supported by IE and Safari */
}
sup {
  font-size: xx-small;
}

ul.lists {
  list-style-type: square;
}

hr.second {
  border: 2px solid #6ac52a;
  display: block;
  border-style: inset;
  width: 42.5%;
  margin-bottom: -9px;
  margin-top: -13px;
  margin-left: 56.8%;
}

hr.first {
  border: 1px solid #eb5e30;
  width: 99%;
  margin-bottom: -20px;
  margin-top: 8px;
  margin-left: 4px;
}

/* Mantine portals every overlay -- Drawer, Modal, Menu -- into a div it appends to <body>.
   `body` is a flex container (above), so that div becomes a flex item laid out AFTER #root:
   at x = 100vw, width 0. Mantine's ModalBase then gives the overlay's inner element
   `position: fixed; width: 100%; top: 0; bottom: 0` with no `left`, relying on `left: auto`
   resolving to a static position of 0 -- which, from a portal parked one viewport across,
   puts the panel exactly one screen-width off to the right. It opens, locks page scroll and
   is never seen.
   Taking the portal node out of flow restores the assumption Mantine makes, for every
   overlay at once. Do not give it a size: it must stay a zero-box origin, since its children
   size themselves against the viewport. */
body > [data-mantine-shared-portal-node] {
  position: absolute;
  top: 0;
  left: 0;
}

#root {
  height: 100%;
  width: 100%;
  margin: 0px;
  display: flex;
  box-sizing: border-box;
}

.full-height {
  height: 100%;
}

.Main-Nonsecure > * {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}

.Main-Nonsecure {
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  flex-grow: 1;
  padding: 0 20px 20px 20px;
}

/* main header */
.main-header-wrapper {
  width: 100%;
  padding: 16px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}
.main-header {
  box-shadow: none !important;
}
.main-sidebar-wrapper {
  margin: 0 20px 0 43px;
}
/* spinner */

.hollow-dots-spinner,
.hollow-dots-spinner * {
  box-sizing: border-box;
}

.hollow-dots-spinner {
  height: 15px;
  width: calc(30px * 3);
}

.hollow-dots-spinner .dot {
  width: 15px;
  height: 15px;
  margin: 0 calc(15px / 2);
  border: calc(15px / 5) solid #238f83;
  border-radius: 50%;
  float: left;
  transform: scale(0);
  animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms;
}

.hollow-dots-spinner .dot:nth-child(1) {
  animation-delay: calc(300ms * 1);
}

.hollow-dots-spinner .dot:nth-child(2) {
  animation-delay: calc(300ms * 2);
}

.hollow-dots-spinner .dot:nth-child(3) {
  animation-delay: calc(300ms * 3);
}

@keyframes hollow-dots-spinner-animation {
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* side bar */
.main-sidebar-wrapper {
  flex: 0;
  padding: 38 20 20;
}
.main-sidebar {
  z-index: 61;
  flex-direction: row;
  justify-content: space-around;
}

/* footers */
.main-content-footer {
  display: flex;
  flex-direction: row;
  max-height: 40px;
  padding-left: 16px;
  padding-right: 16px;
  background: rgb(69, 90, 100);
  justify-content: space-evenly;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
}
.main-content-footer-privacy {
  padding-left: 35px;
  padding-right: 35px;
  text-decoration: none !important;
}

/* Privacy Page */
.main-content-privacy-subsection {
  padding-left: 45px;
}

.previous-round {
  background-color: #f1f1f1;
  color: black;
  border-radius: 50%;
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}
.link:hover {
  cursor: pointer;
}

.header-menu {
  display: none;
  padding-left: 15px;
  margin-left: 25px;
}

.header-menu button {
  padding: 0;
}

.header-menu-name {
  text-transform: capitalize;
}
.react-datepicker-popper {
  z-index: 9999 !important;
}
.redoc-wrap {
  background-color: #eef1ee;
}

.mtn {
  margin-top: 0 !important;
}

.mbn {
  margin-bottom: 0 !important;
}

.ptn {
  padding-top: 0 !important;
}

.pbn {
  padding-bottom: 0 !important;
}

.pvn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pt5 {
  padding-top: 0.4166666667rem !important;
}

/* mobile settings */
@media screen and (max-width: 768px) {
  body,
  #root,
  .Main-Nonsecure {
    height: auto;
  }

  .validate-email-header-mobile {
    display: none !important;
  }
  .main-content-container {
    padding-left: 20px !important;
  }
  .main-sidebar-container {
    display: none !important;
  }
  .main-sidebar-wrapper {
    display: none !important;
  }
  .main-sidebar {
    margin-left: 0 !important;
    height: 800px !important;
    min-height: inherit !important;
  }
  .cbapbar-sticky {
    width: 100% !important;
    margin-right: -34px !important;
    padding-right: 70px !important;
  }

  .main-header {
    padding: 0 !important;
  }
  .header-menu {
    display: inline-block !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 5px !important;
  }

  .toolbar {
    padding: 0 !important;
    min-height: inherit !important;
  }

  .header-menu-name {
    display: none !important;
  }
  .main-logo {
    display: none;
  }

  .company {
    font-size: 10px !important;
  }
  .header-icon {
    width: 1rem !important;
    margin-top: -10px !important;
  }
  .tile-icon {
    width: 1.5rem !important;
  }
  .tile-count {
    font-size: 16px !important;
  }
  .tile-label {
    font-size: 8px !important;
  }
  .main-content-header-validate {
    font-size: 12px;
  }
  .entry-signup-form {
    width: 95% !important;
  }
  .entry-signup-confirmpassword {
    padding-bottom: 10px;
  }
  .main-entry-login-form,
  .main-entry-userconfirm-body,
  .main-entry-forgotpassword-form,
  .main-entry-resendvalidation-form,
  .main-entry-signup-field {
    width: 55vw !important;
  }
  .main-entry-forgotpassword,
  .main-entry-resendvalidation,
  .main-entry-login,
  .main-entry-userconfirm {
    justify-content: center;
  }
  .main-entry-logout {
    justify-content: flex-start;
  }
  .non-secure-wrapper {
    height: auto;
  }

  /* download cards mobile */
  .cardheader-root-mobile {
    padding: 0px !important;
    margin-top: 10px;
    display: flex;
    justify-self: center;
  }
}
/* end of mobile */

.absolute {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: 'translateX(-50%)';
  z-index: 1000;
}

.dropbtn {
  background-color: #3498db;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropup {
  position: relative;
  display: inline-block;
}

.dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  bottom: 50px;
  z-index: 1;
}

.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropup-content a:hover {
  background-color: #ccc;
}

.dropup:hover .dropup-content {
  display: block;
}

.dropup:hover .dropbtn {
  background-color: #2980b9;
}

.calendar {
  left: -145px;
}

[class*='ratio'] {
  position: relative;
}

[class*='ratio']:before {
  content: '';
  display: block;
}

.ratio--video:before {
  padding-top: 56.25%; /* 16x9 */
}

.ratio--1x1,
.ratio--square:before {
  padding-top: 100%;
}

.ratio--2x1:before {
  padding-top: 50%;
}

.ratio--1-5x1:before {
  padding-top: 45%;
}

.ratio--contact-card:before {
  padding-top: 40.3%;
}

.ratio--1x2:before {
  padding-top: 200%;
}

.ratio__content,
.ratio--video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ratio--graph:before {
  padding-top: 58.2720588235%;
}

/* A .container scrolls with no scrollbar drawn. */
.container {
  scrollbar-width: none;
}

.MuiAutocomplete-popup {
  z-index: 999999 !important;
}

.paddingVerticalNone {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.paddingTopNone {
  padding-top: 0 !important;
}

.paddingBottomNone {
  padding-bottom: 0 !important;
}

.chat-bubble.bottomRight {
  bottom: 75px !important;
}

.strip-wysiwyg ul,
.strip-wysiwyg ol {
  list-style: none;
  padding-left: 0;
}

.strip-wysiwyg strong {
  font-weight: 400;
}

.strip-wysiwyg em {
  font-style: normal;
}

.strip-wysiwyg p {
  margin: 0;
}

.list--unstyled {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.list-item--flex {
  display: flex;
  align-items: center;
}

.inline-flex {
  display: inline-flex;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.newline {
  display: block !important;
}

/* colors */
.text-white {
  color: #fff !important;
}

/* flex */
.flex,
.flex-between,
.align-left,
.align-center,
.align-right
.justify-between,
.justify-start,
.justify-center,
.justify-end,
.direction-column {
  display: flex;
}

.direction-column {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

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

.justify-end {
  justify-content: flex-end;
}

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

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

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

.align-left {
  align-items: left;
}

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

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

.justify-start {
  justify-content: start;
}

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

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

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

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

/* link: alternates */
a.link-underlined,
a.link-underlined--hover:hover {
  text-decoration: underline;
}


.pan {
  padding: 0 !important;
}

/* css transitions */
.fade-enter{
  opacity: 0;
}

.fade-exit{
  opacity: 1;
}

.fade-enter-active{
  opacity: 1;
}

.fade-exit-active{
  opacity: 0;
}

.fade-enter-active,
.fade-exit-active{
  transition: opacity 500ms;
}

.animate-grow {
  transform: scale(1);
  transition: transform 100ms ease-in-out !important;
}

.animate-grow:hover,
.animate-grow:focus {
  transform: scale(1.05);
}

.scale--small {
  transform: scale(1);
  transition: transform 200ms ease-in-out !important;
}

.scale--small:hover {
  transform: scale(1.02);
}