@font-face {
  font-family: 'Baloo-Regular';
  src: local('Baloo2-Regular'), url('../fonts/Baloo2-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Baloo-Bold';
  src: local('Baloo2-Bold'), url('../fonts/Baloo2-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Baloo-SemiBold';
  src: local('Baloo2-SemiBold'), url('../fonts/Baloo2-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Ubuntu-Light';
  src: local('Ubuntu-Light'), url('../fonts/Ubuntu-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Ubuntu-Regular';
  src: local('Ubuntu-Regular'), url('../fonts/Ubuntu-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Ubuntu-Medium';
  src: local('Ubuntu-Medium'), url('../fonts/Ubuntu-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Ubuntu-Bold';
  src: local('Ubuntu-Bold'), url('../fonts/Ubuntu-Bold.ttf') format('truetype');
}

.font-ubuntu-bold {
  font-family: 'Ubuntu-Bold';
}
.font-ubuntu-medium {
  font-family: 'Ubuntu-Medium';
}
.font-ubuntu-regular {
  font-family: 'Ubuntu-Regular';
}
.font-ubuntu-light {
  font-family: 'Ubuntu-Light';
}
.font-baloo-regular {
  font-family: 'Baloo-Regular';
}
.font-baloo-semibold {
  font-family: 'Baloo-SemiBold';
}
.font-baloo-bold {
  font-family: 'Baloo-Bold';
}
.h0 {
  font-size: 3.5rem;
}
.font-weight-max {
  font-weight: 800;
}
.font-75em {
  font-size: 0.75em;
}
.font-85em {
  font-size: 0.85em;
}
.font-90em {
  font-size: 0.90em !important;
}
.font-100em {
  font-size: 1em;
}
.font-100rem {
  font-size: 1rem;
}
.font-110em {
  font-size: 1.1em !important;
}
.font-250em {
  font-size: 2.5em;
}
.font-150em {
  font-size: 1.5em;
}
.debug-layout,
.debug-layout * {
  outline: solid red 1px;
}

:root {
  --primary-red: #e1523e;
  --primary-yellow: #ffcd00;
  --dark-green: #33a745;
  --secondary-green: #49c5b1;
  --secondary-blue-green: #248F90;
  --secondary-mid-blue: #006980;
  --secondary-dark-blue: #005a6f;
  --secondary-darker-blue: #004456;
  /* original pale grey eye-dropped from the design spec image. I think it's too light... */
  /* --pale-grey: #d0d2d3; */
  --pale-grey: #a0a2a3;
  --grey: #808184;
  --orange: #fbb02f;
  --dark-text-grey: #54605e;
  --bg-pale: #f1f1f2;
  --bg-pale-darker: #eaeaef;

  --fade-in-time: 1s;
  --card-border-radius: 0.75rem;
}

html {
  overflow-x: hidden;
}
body {
  color: var(--secondary-mid-blue);
}

.color-red {
  color: var(--primary-red);
}
.color-darkorange {
  color: darkorange;
}
.color-yellow {
  color: var(--primary-yellow);
}
.color-green {
  color: var(--secondary-green);
}
.color-blue-green {
  color: var(--secondary-blue-green);
}
.color-mid-blue {
  color: var(--secondary-mid-blue);
}
.color-dark-blue {
  color: var(--secondary-dark-blue);
}
.color-darker-blue {
  color: var(--secondary-darker-blue);
}
.color-pale-grey {
  color: var(--pale-grey);
}
.color-grey {
  color: var(--grey);
}
.color-orange {
  color: var(--orange);
}
.color-orangered {
  color: orangered;
}
.color-dark-text-grey {
  color: var(--dark-text-grey);
}
.color-black {
  color: black;
}
.color-inherit {
  color: inherit !important;
}

.line-height-1 {
  line-height: 1;
}
.line-height-1pt2 {
  line-height: 1.2;
}
.line-height-1pt5 {
  line-height: 1.5;
}
.line-height-1pt75 {
  line-height: 1.75;
}
.pt-0pt5 {
  padding-top: .125rem !important;
}
.px-0pt5 {
  padding-left: .125rem !important;
  padding-right: .125rem !important;
}
.p0-0pt5 {
  padding-top: .125rem !important;
  padding-bottom: .125rem !important;
}
.p-0pt5 {
  padding: .125rem !important;
}

.border-red {
  border-color: var(--primary-red);
}
.border-yellow {
  border-color: var(--primary-yellow);
}
.border-green {
  border-color: var(--secondary-green);
}
.border-black {
  border-color: black;
}
.border-mid-blue {
  border-color: var(--secondary-mid-blue);
}
.border-dark-blue {
  border-color: var(--secondary-dark-blue);
}
.border-white {
  border-color: white;
}
.border-grey {
  border-color: var(--grey);
}
.border-pale-grey {
  border-color: var(--pale-grey);
}
.border-medium {
  border-width: 0.5rem;
}
.border-solid-yellow-medium {
  border: 50px solid var(--primary-yellow);
}
.border-1px-lightgrey-solid {
  border: 1px lightgrey solid;
}
.border-bottom-mid-blue {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid var(--secondary-mid-blue);
}
.border-bottom-none{
  border-bottom: none !important;
}
.border-bottom-red {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid var(--primary-red);;
}
.border-bottom-green {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid var(--secondary-green);;
}
.border-top-only{
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-top: 1px solid;
}

/* below iPad width */
.border-rad-top-md-right, .border-rad-top-lg-right, .border-rad-top-xl-right,
.border-rad-top-md-left, .border-rad-top-lg-left, .border-rad-top-xl-left {
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}
.border-rad-bottom-md-left, .border-rad-bottom-lg-left, .border-rad-bottom-xl-left
.border-rad-bottom-md-right, .border-rad-bottom-lg-right, .border-rad-bottom-xl-right {
  border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
}

/* iPad width and above */
@media only screen and (min-width: 768px) {
  .border-rad-top-md-right,
  .border-rad-bottom-md-right {
    border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
  }
  .border-rad-bottom-md-left,
  .border-rad-top-md-left {
    border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
  }
}

@media only screen and (min-width: 992px) {
  .border-rad-top-lg-right,
  .border-rad-bottom-lg-right {
    border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
  }
  .border-rad-bottom-lg-left,
  .border-rad-top-lg-left {
    border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
  }
}

@media only screen and (min-width: 1200px) {
  .border-rad-top-xl-right,
  .border-rad-bottom-xl-right {
    border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
  }
  .border-rad-bottom-xl-left,
  .border-rad-top-xl-left {
    border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
  }
}


.border-top-none {
  border-top: none;
}
.border-left-none{
  border-left: none;
}
.border-right-none{
  border-right: none;
}
.border-top-radius-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bg-white {
  background-color: white;
}
.bg-pale {
  background-color: var(--bg-pale);
}
.bg-pale-darker {
  background-color: var(--bg-pale-darker);
}
.bg-grey {
  background-color: grey;
}
.bg-dark-text-grey {
  background-color: var(--dark-text-grey);
}
.bg-yellow {
  background-color: var(--primary-yellow);
}
.bg-red {
  background-color: var(--primary-red);
}
.bg-green {
  background-color: var(--secondary-green) !important;
}
.bg-blue-green {
  background-color: var(--secondary-blue-green);
}
.bg-mid-blue {
  background-color: var(--secondary-mid-blue);
}
.bg-dark-blue {
  background-color: var(--secondary-dark-blue) !important;
}
.bg-darker-blue {
  background-color: #064456 !important;
}
.bg-yellow-red-lr {
  background: linear-gradient(to right, var(--primary-yellow), var(--primary-red));
}
.bg-green-dark-blue-lr {
  background: linear-gradient(to right, var(--secondary-green), var(--secondary-dark-blue));
}
.bg-green-mid-blue-lr {
  background: linear-gradient(to right, var(--secondary-green), var(--secondary-mid-blue));
}
.bg-green-mid-blue-rl {
  background: linear-gradient(to left, var(--secondary-green), var(--secondary-mid-blue));
}
.bg-solid-curly-img {
  background-image: url('../images/sign-up-background.png');
  background-color: orange;
  background-position: left top;
  background-size: 100%;
}

/* backgrounds for pseudo classes (eg for use with .clip-text-bg-gradient) */
.bg-after-white:after {
  background-color: #fff;
}

/* specific background gradients (as seen on cards in dashboard home) */
/* these gradients are also given semantic-ish names (e.g. 'overdue'),
   for convenience in referencing keys from, for example, filters/company.py within templates,
   please don't use the semantic names otherwise.
 */
.bg-danger-low, .bg-due_in_30_days, .bg-due_in_60_days {
  background: linear-gradient(to right, #ffcd00, #f7ae11 50%, #f08f21 100%);
}
.bg-danger-medium-low, .bg-due_in_14_days, .bg-dashboard_second_reminder_due_days {
  background: linear-gradient(to right, #f08f21, #eb7c2a 61.96%, #e76a32 100%);
}
.bg-danger-medium-high, .bg-upcoming, .bg-due_in_3_days, .bg-dashboard_first_reminder_due_days {
  background: linear-gradient(to right, #ec8128, #e9732f 26.5%, #e1523e 100%);
}
.bg-danger-high, .bg-due_today, .bg-overdue {
  background: linear-gradient(to right, #e45031, #e1523e 21.2%, #cd3b2f 97%);
}
.bg-success-light, .bg-to_be_sent {
  background: linear-gradient(to right, #68c6b8, #53bfb1 70.5%, #3eb7aa 100%);
}
.bg-success-medium-light, .bg-user, .bg-review_within_7_days, .bg-review_today {
  background: linear-gradient(to right, #3eb7a9, #2ca19d 60.3%, #1a8a91 100%);
}
.bg-success-medium-dark, .bg-completed_this_month, .bg-review_within_14_days {
  background: linear-gradient(to right, #289b9b, #14828e 50%, #006980 100%);
}
.bg-success-dark, .bg-completed, .bg-review_within_30_days, .bg-review_within_60_days, .bg-debt_paid, .bg-search_text {
  background: linear-gradient(to right, #006980, #00566b 52%, #004456 89%);
}

/* break the word to next line */
.break-word{
  white-space: initial;
}

/* TRANSPARENT TEXT WITH AUTO-BORDERS (eg for clear-filter buttons on companies table) */
/* Clip text element */
.clip-text-bg-gradient {
  line-height: 1.5;
  position: relative;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.clip-text-bg-gradient:before,
.clip-text-bg-gradient:after {
  position: absolute;
  content: '';
  border-radius: inherit;
}
/* Background */
.clip-text-bg-gradient:before {
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
}
/* Text Background */
.clip-text-bg-gradient:after {
  position: absolute;
  z-index: -1;
  /* top/bottom/left/right effectively constrain inner element size, to set border width */
  top: 0.166666667em;
  right: 0.166666667em;
  bottom: 0.166666667em;
  left: 0.166666667em;
}


/* ANIMATED BACKGROUND GRADIENTS */
/* green - blue (success/info) */
.bg-green-dark-blue-animate-once {
  background: linear-gradient(
    270deg,
    var(--secondary-green),
    var(--secondary-dark-blue),
    var(--secondary-green)
  );
  background-size: 200% 200%;
  -webkit-animation: bg-success-animation 2s ease infinite;
  -moz-animation: bg-success-animation 2s ease infinite;
  animation: bg-success-animation 2s ease infinite;
}
@-webkit-keyframes bg-success-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes bg-success-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bg-success-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* yellow - red (error) */
.bg-red-yellow-animate-once {
  background: linear-gradient(
    270deg,
    var(--primary-red),
    var(--primary-yellow),
    var(--primary-red)
  );
  background-size: 200% 200%;
  -webkit-animation: bg-error-animation 2s ease infinite;
  -moz-animation: bg-error-animation 2s ease infinite;
  animation: bg-error-animation 2s ease infinite;
}
@-webkit-keyframes bg-error-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes bg-error-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bg-error-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.hover-color-white:hover,
.hover-color-white:focus {
  color: white !important;
}
.hover-color-yellow:hover,
.hover-color-yellow:focus {
  color: var(--primary-yellow) !important;
}
.hover-color-orange:hover,
.hover-color-orange:focus {
  color: orangered !important;
}
.hover-color-red:hover,
.hover-color-red:focus {
  color: var(--primary-red) !important;
}
.hover-color-green:hover,
.hover-color-green:focus {
  color: var(--secondary-green) !important;
}
.hover-color-mid-blue:hover,
.hover-color-mid-blue:focus {
  color: var(--secondary-mid-blue) !important;
}
.hover-color-dark-blue:hover,
.hover-color-dark-blue:focus {
  color: var(--secondary-dark-blue) !important;
}

a {
  white-space: nowrap;
}
a:hover {
  color: inherit;
}

p {
  font-family: 'Ubuntu-Regular';
}

a:hover {
  color: var(--secondary-mid-blue);
}

.hover-no-decoration:hover {
  text-decoration: none;
}
.hover-underline:hover {
  text-decoration: underline;
}
.cursor-pointer:hover {
  cursor: pointer;
}
.cursor-no-pointer:hover {
  cursor: auto;
}
.hover-mid-blue:hover {
  color: var(--secondary-mid-blue);
}
.hover-fade-70:hover {
  opacity: 70%;
}
.hover-bg-pale-grey:hover {
  background-color: #f6f6f7;
}
.hover-bg-inherit:hover {
  background-color: inherit;
}
.hover-color-inherit:hover {
  color: inherit;
}
.hover-small-shadow:hover, .hover-small-shadow:active {
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.25);
}
.hover-xsmall-shadow:hover, .hover-small-shadow:active {
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.25);
}
.hover-no-box-shadow:hover{
  box-shadow: none !important;
}
.focus-no-border:focus {
  box-shadow: none;
}

.overflow-hidden {
  overflow: hidden;
}

.fade-in-on-load img {
  opacity: 0;
}

.transition-opac-500 {
  transition: all 500ms;
}
.transition-opac-300 {
  transition: all 300ms;
}

small {
  font-size: 0.85em;
}

.pill {
  border-radius: 2000px;
}

.fill-container {
  width: 100%;
  height: 100%;
}

.text-transparent {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

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

.btn-pill {
  border: 0.2em solid;
  border-radius: 100px;
  min-width: 120px;
  padding: 0 0.75rem;
  font-family: 'Baloo-SemiBold';
  font-size: 1rem;
  transition: all 300ms ease;
  text-decoration: none;
  cursor: pointer;
  line-height: normal;
}

.btn-pill-small {
  border: 0.25em solid;
  border-radius: 100px;
  min-width: 120px;
  padding: 0.125em 0.5em 0.25em;
  font-family: 'Ubuntu-Medium';
  font-size: 0.8rem;
  transition: all 300ms ease;
  text-decoration: none;
  line-height: normal;
}

.btn-pill-extra-small {
  border: 0.15em solid;
  border-radius: 100px;
  padding: 0 0.5em;
  font-family: 'Ubuntu-Medium';
  font-size: 0.6rem;
  transition: all 300ms ease;
  text-decoration: none;
  cursor: pointer;
}

.btn-pill:hover:not([disabled]),
.btn-pill:active:not([disabled]),
.btn-pill-small:hover:not([disabled]),
.btn-pill-small:active:not([disabled]),
.btn-pill-extra-small:hover:not([disabled]),
.btn-pill-extra-small:active:not([disabled]) {
  color: inherit;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.btn-pill[disabled],
.btn-pill-small[disabled],
.btn-pill-small-without-width[disabled],
.btn-pill-extra-small[disabled] {
  opacity: 0.35;
}

.focus-no-outline:focus {
  outline: none !important;
}

/* MESSAGES ('flash') */
.messages > .info {
  color: var(--secondary-green);
}
.messages > .error {
  color: var(--primary-red);
}

/* POSITIONING */
.relative-position-no-size {
  /* use this as the parent to an (absolutely positioned) element
    that you don't want to affect the surrounding document flow */
  position: relative;
  width: 0;
  height: 0;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

/* SIZING */
.min-h-200 {
  min-height: 200px;
}
.min-h-175 {
  min-height: 175px;
}
.min-h-150 {
  min-height: 150px;
}

/* BORDERS */
.rounded-12 {
  border-radius: .75rem;
}
.rounded-10 {
  border-radius: .625rem;
}
.rounded-5 {
  border-radius: .3125rem;
}
.rounded-3 {
  border-radius: .1875rem;
}
.rounded-none {
  border-radius: 0 !important;
}
.rounded-b-10 {
  border-bottom-left-radius: .625rem;
  border-bottom-right-radius: .625rem;
}
.rounded-t-10 {
  border-top-left-radius: .625rem;
  border-top-right-radius: .625rem;
}
.rounded-bl-10 {
  border-bottom-left-radius: .625rem;
}
.pill-border {
  border-radius: 500px;
}
.border-mid-blue {
  border-color: var(--secondary-mid-blue);
}
.border-w3 {
  border-width: 3px;
}
.border-w2 {
  border-width: 2px;
}
.border-none {
  border: none;
}

.rounded-box-shadow {
  box-shadow: .625rem .625rem .9375rem .5rem rgba(0, 0, 0, 0.1);
}
.shadow-smaller {
  box-shadow: .3125rem .3125rem .625rem 0px rgba(0, 0, 0, 0.3);
}
.shadow-dropdown-menu {
  box-shadow: 0px .1875rem .375rem 0px rgba(0, 0, 0, 0.2);
}

.placeholder-mid-blue::placeholder {
  opacity: 100%;
  color: var(--secondary-mid-blue);
}
.placeholder-grey::placeholder {
  color: var(--grey);
}
.placeholder-white::placeholder {
  opacity: 100%;
  color: white;
}
.placeholder-pale-grey::placeholder {
  font-family: 'Ubuntu-Medium';
  font-size: 1.125rem;
  color: var(--pale-grey);
}

/* SEMANTIC CLASSES */
.company-card {
  padding: 1rem;
  border-radius: .3125rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.1);
}
.large-card .header {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.3rem;
  margin-right: -15px;
  margin-left: -15px;
  color: white;
  font-weight: 800;
  min-height: 2.90625rem;
  padding-left: 0.5rem;
  align-items: center;
  border-top-left-radius: .625rem;
  border-top-right-radius: .625rem;
  font-family: 'Baloo-SemiBold';
  background: linear-gradient(to right, var(--secondary-green), var(--secondary-dark-blue));
}
.large-card .header .search-filter {
  opacity: 100%;
  border: none;
  color: white;
  max-width: 100%;
  border-radius: 500px;
  padding-bottom: 0.2rem;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  font-family: 'Ubuntu-Medium';
  font-size: .8125rem;
  line-height: 1.5;
  background: #32a8a1;
}
.large-card .header .search-filter::placeholder {
  opacity: 100%;
  color: white;
}
.large-card .body {
  margin-right: -15px;
  margin-left: -15px;
  box-shadow: .3125rem .3125rem .625rem 0px rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: .625rem;
  border-bottom-right-radius: .625rem;
  background-color: white;
  overflow-x: auto;
}
.large-card .header .header-icon {
  color: white;
  transition: all 300ms;
}
.large-card .header .header-icon:hover {
  cursor: pointer;
  opacity: 70%;
}
.large-card .header .dropdown-filter-options {
  color: white;
  background-color: var(--secondary-dark-blue) !important;
  font-family: 'Ubuntu-Regular';
  box-shadow: .3125rem .3125rem .6825rem 0px rgba(0, 0, 0, 0.3);
  padding: 0.063rem;
}
.large-card.smaller {
  max-width: 62rem;
}
.large-card .footer .pagination-link {
  font-family: 'Ubuntu-Medium';
  color: var(--secondary-mid-blue);
}
.large-card .footer .pagination-link:hover,
.large-card .footer .pagination-link:focus {
  color: var(--secondary-green) !important;
}
.inset-table.table tr:first-of-type td {
  padding-top: 1rem;
}
.inset-table.table tr td {
  padding-top: .25rem;
  padding-bottom: 0;
  overflow: hidden;
}
.inset-table td a {
  /* allow links in cells to wrap, and prevent them causing the container to overflow the page */
  white-space: normal;
}
.base-inset-table input.search-filter {
  font-size: 0.8125rem;
  line-height: 1.25;
  border: 0.125rem solid var(--secondary-green);
}

/* for tables with fixed header and scrolling body */
.table-fixed-head-wrapper {
  overflow: auto;
  max-height: calc(100vh - 14.5rem);
  height: min-content;
  width: 100%;
}
.table-fixed-head-wrapper table {
  /* this is a bit of a hack I think - for some reason table body takes up too much space on overflow without this */
  overflow: hidden;
}
@media screen and (max-width: 575px) {
  .table-fixed-head-wrapper {
    max-height: calc(100vh - 11.5rem);
  }
}
.table-fixed-head-wrapper thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}
.unstyled-list ul {
  list-style: none;
  padding-left: 0;
}
.table-fixed-head-wrapper thead th {
  position: relative;
  z-index: 10;
  vertical-align: bottom;
  padding: .25rem 0 .5rem;
}
.table-fixed-head-wrapper thead th::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-bottom: 2px solid lightgrey;
}
.table-fixed-head-wrapper tbody td {
  border-top: 1px solid lightgrey;
}
.table-fixed-head-wrapper tbody tr {
  font-size: 0.86rem;
}
.table-fixed-head-wrapper tbody td:not(:first-of-type) {
  padding: .25rem .4rem 0;
}

/* manage-feed-action-link rules below are to truncate links in the manage feed to 2 lines
 * and add an ellipsis (...) at the end. max-height MUST be exactly 2 times the line-height
 * of the content for this to work reliably
 */
.account-modal-wrapper {
  margin: 0 40px;

}
.account-detail-wrapper {
  box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
  width: 100%;
  margin-top: 20px;
  padding: 20px 10px;
}
.account-detail-wrapper .account_name {
  font-size: 18px;
  font-weight: 500;
  color: #000;
}
button.connection-btn {
  border-radius: 100px;
  padding: 0.125rem 0.5rem;
  font-family: 'Ubuntu-Medium';
  font-size: 0.8rem;
  transition: all 300ms ease;
  text-decoration: none;
  color: #fff;
  border: 0;
}
button.connection-btn:hover, button.connection-btn:active {
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.25);
}
button.connection-btn.active{
  background-color: var(--dark-green);
}
button.connection-btn.disconnect{
  background-color: var(--primary-red);
}
button.connection-btn.connect{
  border: 0.2rem solid;
  border-radius: 100px;
  background-color: transparent!important;
  color: var(--secondary-blue-green);
}
button.connection-btn.disconnect:disabled {
  background-color: rgb(225 82 62 / 75%);
}
button.connection-btn.active:disabled {
  background-color: rgb(52 168 69 / 75%);
}
.account-detail-wrapper .rv-checkbox-container {
  display: unset;
}
.account-detail-wrapper .rv-checkbox-container .checkmark {
  height: 22px;
  width: 22px;  
  top: -3px;
}
.account-detail-wrapper .rv-checkbox-container .checkmark:after {
  left: 5px;
  top: 2px;
  width: 8px;
}
.account-detail-wrapper table td,
.account-detail-wrapper table th {
  text-align: center;
  vertical-align: middle;
}
/* CUSTOM CHECKBOX */
/* Customize the label (the container) */
.rv-checkbox-container {
  display: block;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.rv-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.rv-checkbox-container .checkmark {
  position: absolute;
  top: 4px;
  left: 0;
  height: 16px;
  width: 16px;
  border-width: 2px;
  border-style: solid;
  border-color: inherit;
  background-color: white;
}
.rv-checkbox-container .checkmark.circle {
  border-radius: 100px;
}
.rv-checkbox-container .checkmark.mid-blue {
  border-color: var(--secondary-mid-blue);
}
/* On mouse-over, add a grey background color */
.rv-checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.rv-checkbox-container input:checked ~ .checkmark {
  background-color: var(--secondary-mid-blue);
}
/* Create the checkmark/indicator (hidden when not checked) */
.rv-checkbox-container .checkmark:after {
  content: '';
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.rv-checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.rv-checkbox-container .checkmark:after {
  left: 3px;
  top: 0px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.rv-checkbox-container .checkmark.left-4px:after {
  left: 4px;
}


/* DROPDOWNS */
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* TYPEAHEAD */
.twitter-typeahead {
  margin: 0;
  padding: 0;
  width: 100%;
}
.twitter-typeahead .tt-menu.tt-open {
  width: auto;
  min-width: 100%;
  background: white;
}
.twitter-typeahead .tt-menu.tt-open > * {
  border: 1px solid var(--pale-grey);
}
.twitter-typeahead .tt-menu.tt-open > * > * {
  padding: 5px 10px;
}
.tt-cursor {
  background-color: lightgrey;
}

/* dashboard quick search */
.tt-dataset-companies .tt-suggestion:hover {
  background-color: #f6f6f7;
}
/* /TYPEAHEAD */

/* COPIED IN FROM CARD_PAGES */
.card-form-field {
  font-family: 'Ubuntu-Medium';
  font-size: 1.125rem;
  margin-top: 14px;
  margin-bottom: 0;
  padding: 0 0 0.25rem 0;
  border: none;
  border-bottom: 3px solid var(--secondary-mid-blue);
  color: var(--dark-text-grey);
}

.card-form-field::placeholder {
  color: var(--pale-grey);
}
.card-form-field:disabled {
  background-color: lightgrey;
}

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

.disabled-pointer{
  pointer-events: none;
}

.btn-pill-small-without-width {
  border: 0.2rem solid;
  border-radius: 100px;
  padding: 0.125rem 0.5rem;
  font-family: 'Ubuntu-Medium';
  font-size: 0.8rem;
  transition: all 300ms ease;
  text-decoration: none;
}

.sample-download{
  position: absolute;
  left: 5%;
}

.font-15-px{
  font-size: 15px;
}

.hover-background-transparent:hover, .hover-background-transparent:active{
  background: transparent !important;
}

.hover-border-mid-blue:hover {
  border-color: var(--secondary-mid-blue);
}

.hover-border-round:hover {
  border-radius: 100px !important;
}
.focus-border-green:focus {
  border-color: var(--secondary-green);
  box-shadow: none;
}

.focus-visible-border-green:focus-visible {
  border-color: var(--secondary-green);
  box-shadow: none;
}

.dropup .dropdown-toggle::after{
  color: black;
}

.hover-color-mid-blue-focus:focus, .hover-color-mid-blue-focus:active {
  border-radius: 100px !important;
}

.custom-control-input:checked~.custom-control-label::before{
    border-color: var(--secondary-green);
    background-color: var(--secondary-green);
}

.disabled-background-color{
    background-color: lightgrey !important;
}

.disabled-color{
    color: lightgrey;
}

.disabled-border-color{
    border-color: lightgrey !important;
}

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

.disabled-background-color-white:after{
    background: white !important;
}
.text-align-left{
    text-align: left;
}

.break-line-word {
    overflow: auto;
    white-space: normal;
}

.line-height-1pt5 {
    line-height: 1.5
}
.left-2{
    left: 2%;
}
.left-3{
    left: 3%;
}
.min-width-max-content{
    min-width: max-content;
}
.min-width-60{
    min-width: 60%;
}
.min-width-70{
    min-width: 70%;
}
.border-1px-mid-blue{
    border: 1px solid var(--secondary-mid-blue);
}
.float-right{
    float: right;
}
.float-left{
    float: left;
}
.margin-right-3{
    margin-right: 3%;
}
.right-8-5{
    right: 8.5%;
}
.right-2{
    right: 2%;
}
.min-width-45{
    min-width: 45%;
}
.margin-left-3{
    margin-left: 3%
}
.margin-right-1{
    margin-right: 1%;
}
.line-height-1pt4 {
    line-height: 1.4;
}
.min-width-50 {
    min-width: 50%;
}
.right-5{
    right: 5%;
}
.overflow-auto{
  overflow: auto;
}
.right-0{
  right: 0 !important;
}
.border-orange{
  border-color: orange !important;
}
.border-4px-solid{
  border: 4px solid;
}
.background-transparent{
  background-color: transparent !important;
}
.color-white{
  color: white;
}
.display-block{
  display: block;
}
.display-none{
  display: none;
}

/* styling for radio-button.html tag */
.radio-btn-wrapper-label {
  position: relative;
}
.radio-btn-wrapper-label:hover, .radio-btn-wrapper-label:active {
  background: rgba(0, 0, 0, .05);
}
.radio-btn-wrapper-label.disabled:hover {
  background: none;
}
.radio-btn-wrapper-label.disabled *:not(input) {
  opacity: 0.65;
}
/* Hide the browser's default radio button */
.radio-btn-wrapper-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radio-btn-wrapper-label .checkbox {
  border-style: solid;
  border-radius: 50%;
  background-color: transparent;
}

.radio-btn-wrapper-label .checkbox .checkmark {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.radio-btn-wrapper-label input:checked ~ .checkbox .checkmark {
  display: block;
}

/* styling for checkbox.html tag */
.checkbox-wrapper-label {
  position: relative;
}
.checkbox-wrapper-label:hover, .checkbox-wrapper-label:active {
  background: rgba(0, 0, 0, .05);
}
.checkbox-wrapper-label.disabled:hover {
  background: none;
}
.checkbox-wrapper-label.disabled *:not(input) {
  opacity: 0.65;
}
/* Hide the browser's default checkbox */
.checkbox-wrapper-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox-wrapper-label .checkbox {
  position: relative;
  border-style: solid;
  background-color: transparent;
}
.checkbox-wrapper-label .checkbox .checkmark-bg {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  display: none;
}
.checkbox-wrapper-label input:checked ~ .checkbox .checkmark-bg {
  display: block;
}
.checkbox-wrapper-label .checkbox .checkmark {
  position: absolute;
  display: none;
  background: transparent;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkbox-wrapper-label input:checked ~ .checkbox .checkmark {
  display: block;
}

.max-content-width{
  width: max-content;
}
.width-100{
  width: 100% !important;
}
.focus-border-black:focus {
  border-color: black;
  box-shadow: none;
}
.height-35px{
  height: 2.1875rem;
}
.height-30{
  height: 30px;
}
.width-90{
  width: 90%;
}
.width-70-px{
  width: 70px;
}
.padding-5-30{
  padding: 5% 30%;
}
.pl-15-px{
  padding-left: 15px;
}
.pl-26-px{
  padding-left: 26px;
}
.extra-small-font{
  font-size: 0.65em !important;
}
.padding-2-20{
  padding: 2% 20% !important;
}
.max-width-100{
  max-width: 100%;
}
.overflow-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-ellipsis-2 {
  /* truncate with ellipsis if content would overflow past the second line */
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 'trigger' overflow/ellipsis after 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* <- without this value the effect doesn't work on 'nowrap' elements like links */
}
.vertical-ellipsis{
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.bottom-0{
  bottom: 0;
}
.black-light{
  color: #333;
}
.line-height-1-rem{
  line-height: 1rem;
}
#preview-modal-dialog{
  max-width: 100%;
  color: #000;
}
.reminder-modal-close{
  font-size: 2.5rem;
  font-weight: 800;
  position: absolute;
  top: -1%;
  right: 1.5%;
}
.font-weight-400 {
  font-weight: 400;
}
.font-size-12-pt{
  font-size: 12pt;
}
.font-size-12px {
  font-size: .75rem;
}
.bootstrap-select .dropdown-menu .dropdown-item.active{
  color: var(--secondary-mid-blue) !important;
  background-color: inherit;
}
.bootstrap-select .dropdown-menu .dropdown-item:active{
  color: #333;
  background-color: inherit;
}

.modal-title.responsive { font-size: 1.75rem; }
@media (max-width: 575.98px) {
  .modal-title.responsive { font-size: 1.25rem; }
}

.menu-page-tile {
  padding: 1rem 1.5rem;
  min-height: 11rem;
  border-radius: .5625rem;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-family: 'Baloo-SemiBold';
  cursor: pointer;
  color: white;
  z-index: 0;
  transition: all 175ms ease;
}
.menu-page-tile .heading {
  font-size: 1.5rem;
  min-height: 2.4rem;
  margin-right: 1.5rem;
}
.menu-page-tile .data-value {
  font-size: 3.5rem;
  font-weight: 800;
}
@media only screen and (max-width: 767.98px) {
  .menu-page-tile {
    padding: .5rem 1rem;
    min-height: 4rem;
  }
  .menu-page-tile .heading {
    font-size: 1.25rem;
    min-height: 1.2rem;
  }
  .menu-page-tile .data-value {
    font-size: 2rem;
  }
}

.menu-page-tile::after {
  content: "";
  transition: all 175ms ease;
  position: absolute;
  border-radius: inherit;
  opacity: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 .125rem .3125rem .1875rem rgba(0, 0, 0, 0.3);
}
.menu-page-tile:hover::after {
  opacity: 1;
}
.menu-page-tile:hover, .menu-page-tile:active {
  text-decoration: none;
  color: white;
  transform: scale(1.02);
}
.menu-page-tile .logo-container {
  position: absolute;
  border-radius: inherit;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
.menu-page-tile .card-logo-decoration {
  width: 68%;
  position: absolute;
  bottom: -25%;
  right: -20%;
  z-index: 1;
}
.menu-page-tile .main-tile-content {
  z-index: 2;
}
.bs-popover-top, .bs-popover-bottom {
  background-color: rgba(96, 96, 102, 0.8);
}
.bs-popover-top .arrow::after, .bs-popover-bottom .arrow::after {
  border-top-color: rgba(96, 96, 102, 0.8);
}
.bs-popover-top .popover-body, .bs-popover-bottom .popover-body {
  color: white;
  font-weight: 400;
  padding: .25rem .75rem;
}




.padding-top-2{
  padding-top: 2%;
}
.margin-top-2{
  margin-top: 2%;
}
.padding-0-7{
  padding: 0 7%;
}
.padding-top-1{
  padding-top: 1%;
}
.border-rad-top-bottom-md-right{
  border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
}
.border-rad-top-bottom-md-left{
  border-radius:  var(--card-border-radius) 0 0 var(--card-border-radius);
}
.font-95em{
  font-size: 0.95em !important;
}
.margin-left-15{
  margin-left: -15%;
}
.padding-1-5rem{
  padding: 0.1rem 0.5rem;
}
.max-width-70{
  max-width: 70%;
}
.hover-border-white:hover {
  border-color: white;
}
.right-10{
  right: 10%;
}
.margin-top-05{
  margin-top: 0.5%;
}
.pr-15-px{
  padding-right: 15px;
}
.font-baloo-semibold-important {
  font-family: 'Baloo-SemiBold' !important;
}
.line-height-3{
  line-height: 3;
}
.fusesign-padding{
    padding: 3% 0;
}
.annature-margin{
    margin-top: 5.4%;
}
.fusesign-margin{
    margin-top: 6.4%;
}
.solvency-minutes-fusesign-margin{
    margin-top: 15.3%;
}
.solvency-minutes-annature-margin{
    margin-top: 15.3%;
}
.annature-margin-top{
     margin-top: -3.5%;
}
.fusesign-margin-top{
    margin-top: -4%;
}
/* for transparent scroll background */
#additional-uploaded-files::-webkit-scrollbar{
  background: transparent;
  width: 8px;
}
#additional-uploaded-files::-webkit-scrollbar-thumb{
  background: var(--secondary-mid-blue);
  border-radius: 5px;
  display: none;
}
#additional-uploaded-files:hover::-webkit-scrollbar-thumb{
  display: block;
}
.color-transparent{
  color:  transparent;
}
.opacity-0{
  opacity: 0;
}
.max-width-74{
    max-width: 74%
}
.width-auto{
    width: auto !important;
}
.word-break{
    word-break: break-word;
}
.width-3{
    width: 3%;
}
.width-20{
    width: 20%;
}
.width-50{
    width: 50% !important;
}
.width-30{
    width: 30% !important;
}
.width-15{
    width: 15%;
}
#dashboard_first_reminder::-webkit-outer-spin-button, #dashboard_first_reminder::-webkit-inner-spin-button,
#dashboard_second_reminder::-webkit-outer-spin-button, #dashboard_second_reminder::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#dashboard_second_reminder, #dashboard_first_reminder {
  -moz-appearance: textfield;
}

#dashboard-settings-modal .modal-content {
    width: 750px;
}

.color-darker-blue-important {
  color: var(--secondary-darker-blue) !important;
}
.border-dark-blue-important{
  border-color: var(--secondary-dark-blue) !important;
}
.border-radius-0{
  border-radius: 0px !important;
}
.min-width-80{
  min-width: 80%;
}
.margin-top-03{
  margin-top: -0.3%;
}
.red-placeholder::-webkit-input-placeholder{
  color: var(--primary-red);
}
.red-placeholder:-moz-placeholder{
  color: var(--primary-red);
  opacity: 1;
}
.red-placeholder::-moz-placeholder{
  color: var(--primary-red);
  opacity: 1;
}
.red-placeholder:-ms-input-placeholder{
  color: var(--primary-red);
}
.red-placeholder::-ms-input-placeholder{
  color: var(--primary-red);
}
.red-placeholder::placeholder {
  color: var(--primary-red);
}
.company-detail-alert-icon, .company-detail-sync-icon, .company-detail-success-icon, .company-detail-error-icon{
  right: 1em;
  top: 0em;
}
.side-padding-1{
  padding: 0 1em;
}
.side-padding-150{
  padding: 0.1em 1.5em;
}
.border-red-important {
  border-color: var(--primary-red) !important;
}
.bg-dark-green{
  background-color: var(--dark-green)
}
.border-dark-green{
  border-color: var(--dark-green)
}
.font-baloo-regular-important {
  font-family: 'Baloo-Regular' !important;
}
.min-width-50px{
  min-width: 50px;
}
.font-100em-important {
  font-size: 1em !important;
}
.checkbox-center .checkbox-wrapper-label{
  margin: 0 auto;
}
.font-baloo-bold-important {
  font-family: 'Baloo-Bold';
}
.height-100{
  height: 100%;
}
.right-2em{
  right: 2em;
}
/* change font in top and bottom */
#attach-invoice-modal .dataTables_wrapper .dataTables_filter,
#attach-invoice-modal .dataTables_wrapper .dataTables_length,
#attach-invoice-modal .dataTables_wrapper .dataTables_info,
#attach-invoice-modal .dataTables_wrapper .ui-button,
#attach-invoice-modal .dataTables_paginate.paging_simple_numbers{
  font-family: 'Baloo-SemiBold'
}
#attach-invoice-modal .dataTables_paginate.paging_simple_numbers .paginate_button {
  margin-left: 0px;
  border-color: lightgrey;
  border-radius: 0;
}
#attach-invoice-modal .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--dark-green);
}
#attach-invoice-modal .dataTables_wrapper .dataTables_paginate .paginate_button.current, #attach-invoice-modal .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--dark-green);
  color: #fff !important;
  border: 1px solid black;
}
.border-solid-red{
  border:  2px solid var(--primary-red);
}

@media only screen and (max-width: 768px) {
    #dashboard-settings-modal .modal-content {
        width: 600px;
    }
};

/* SORTING INDICATORS FOR TABLE HEADERS */
/* these are only here because apparently pseudo classes don't work without any reference to the class proper existing */
.sorting-by-asc, .sorting-by-desc {}

.th-text {
  position: relative;
}
.sorting-by-asc::after, .sorting-by-desc::after {
  position: absolute;
  content: "";
  right: -.625em;
  width: .4375em;
  height: 100%;
  border: .25em solid transparent;
}
.sorting-by-asc::after {
  top: 45%;
  border-top: .4375em solid;
}
.sorting-by-desc::after {
  bottom: 35%;
  border-bottom: .4375em solid;
}
/* For company event log / event logs page modals */
[id*="notification-modal-"] table td {
  color: #000;
  font-weight: 400;
  line-height: 20px;
}
[id*="notification-modal-"] table td a {
  text-decoration: underline;
}
[id*="notification-modal-"] tbody td{
  border-top: None;
}
/* For event logs page modals */

.min-width-36{
  min-width: 36%;
}

/* NEW FEATURES MODAL */
#reviewa-update-notice-modal {
  color: var(--secondary-dark-blue);
  font-family: ubuntu;
}
#reviewa-update-notice-modal .modal-dialog {
  width: 45rem;
  max-width: 95vw;
  border: none;
}
#reviewa-update-notice-modal .modal-header {
  background-image: url("../images/reviewa-update-notice-header-background.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 10rem;
  border-bottom: none;
}
#reviewa-update-notice-modal .modal-header .close {
  color: white;
  text-shadow: 0 0 4px var(--dark-text-grey);
  font-size: 2rem;
  margin-top: -1.5rem;
}
#reviewa-update-notice-modal .modal-body {
  border-top: none;
}
#reviewa-update-notice-modal .modal-footer {
  border-top: none;
}
#reviewa-update-notice-modal .date {
  color: var(--primary-red);
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: .9375em;
}
#reviewa-update-notice-modal a {
  color: var(--secondary-blue-green);
  text-decoration: underline;
}
#reviewa-update-notice-modal h2 {
  font-size: 1.375rem;
  color: var(--secondary-dark-blue);
}
#reviewa-update-notice-modal .inner-header > * {
  line-height: 1;
}
#reviewa-update-notice-modal ul > li {
  list-style-type: disc;
}
.left-6{
  left: 6%;
}


/* asic downtime modal  */
#asic-downtime-modal {
  color: var(--secondary-dark-blue);
  font-family: ubuntu;
}
#asic-downtime-modal .modal-dialog {
  width: 45rem;
  max-width: 95vw;
  border: none;
}
#asic-downtime-modal .modal-header {
  background-image: url("../images/reviewa-update-notice-header-background.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 10rem;
  border-bottom: none;
}
#asic-downtime-modal .modal-header .close {
  color: white;
  text-shadow: 0 0 4px var(--dark-text-grey);
  font-size: 2rem;
  margin-top: -1.5rem;
}
#asic-downtime-modal .modal-body {
  border-top: none;
}
#asic-downtime-modal .modal-footer {
  border-top: none;
}
#asic-downtime-modal .date {
  color: var(--primary-red);
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: .9375em;
}
#asic-downtime-modal a {
  color: var(--secondary-blue-green);
  text-decoration: underline;
}
#asic-downtime-modal h2 {
  font-size: 1.28rem;
  color: var(--secondary-dark-blue);
}
#asic-downtime-modal .inner-header > * {
  line-height: 1;
}
#asic-downtime-modal ul > li {
  list-style-type: disc;
}

.word-break-all {
  word-break: break-all;
}
.right-1em{
  right: 1em;
}
.top-0em{
  top: 0em;
}
#acting-for:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.cursor-default{
  cursor: default;
}

/* SF Widget */
#sf-widget-loader {
  display: none;
  position: absolute;
  bottom: 0;
  right: 1.1%;
  background-color: white;
  width: 10%;
  padding: 0.3em;
  min-width: 170px;
}

#sf-widget-loader > .loading {
  background-color: #f3d400;
  text-align: center;
  color: white;
  font-size: 0.9em;
  padding: 0.4em;
  border-radius: 0.3em;
}

#sf-widget-loader > .loading > .retry {
  display: none;
  color: white;
  cursor: pointer;
}