@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block; /* Enable animation */

  background-color: var(--base-color);

  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;

  position: relative;
  user-select: none;
  overflow: hidden;
  z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
}

.react-loading-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(
    90deg,
    var(--base-color),
    var(--highlight-color),
    var(--base-color)
  );
  transform: translateX(-100%);

  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none; /* Disable animation */
  }
}

:root {
  --reflex-columns: 12;
  --reflex-grid-spacing: 10px;
  --reflex-xs: 576px;
  --reflex-sm: 768px;
  --reflex-md: 992px;
  --reflex-lg: 1200px;
  --reflex-xlg: 1600px;
  --reflex-xxs-max: 575px;
  --reflex-xs-max: 767px;
  --reflex-sm-max: 991px;
  --reflex-md-max: 1199px;
  --reflex-lg-max: 1599px;
}

.container,
.container-full {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.container .grid,
.container-full .grid {
  margin-right: -10px;
  margin-left: -10px;
}

@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}

.grid {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
  position: relative;
  list-style-type: none;
}

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

[class*=col-] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  vertical-align: top;
  padding: 10px;
}

[class*=col-]::before, [class*=col-]::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*=col-] .grid {
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: -10px;
}

.col-12 {
  width: 100%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-9 {
  width: 75%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-6 {
  width: 50%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-3 {
  width: 25%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-1 {
  width: 8.3333333333%;
}

@media (min-width: 576px) {
  .col-xs-12 {
    width: 100%;
  }
  .col-xs-11 {
    width: 91.6666666667%;
  }
  .col-xs-10 {
    width: 83.3333333333%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-8 {
    width: 66.6666666667%;
  }
  .col-xs-7 {
    width: 58.3333333333%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-5 {
    width: 41.6666666667%;
  }
  .col-xs-4 {
    width: 33.3333333333%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-2 {
    width: 16.6666666667%;
  }
  .col-xs-1 {
    width: 8.3333333333%;
  }
}

@media (min-width: 768px) {
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.6666666667%;
  }
  .col-sm-10 {
    width: 83.3333333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.6666666667%;
  }
  .col-sm-7 {
    width: 58.3333333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.6666666667%;
  }
  .col-sm-4 {
    width: 33.3333333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.6666666667%;
  }
  .col-sm-1 {
    width: 8.3333333333%;
  }
}

@media (min-width: 992px) {
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.6666666667%;
  }
  .col-md-10 {
    width: 83.3333333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.6666666667%;
  }
  .col-md-7 {
    width: 58.3333333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.6666666667%;
  }
  .col-md-4 {
    width: 33.3333333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.6666666667%;
  }
  .col-md-1 {
    width: 8.3333333333%;
  }
}

@media (min-width: 1200px) {
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.6666666667%;
  }
  .col-lg-10 {
    width: 83.3333333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.6666666667%;
  }
  .col-lg-7 {
    width: 58.3333333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.6666666667%;
  }
  .col-lg-4 {
    width: 33.3333333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.6666666667%;
  }
  .col-lg-1 {
    width: 8.3333333333%;
  }
}

@media (min-width: 1600px) {
  .col-xlg-12 {
    width: 100%;
  }
  .col-xlg-11 {
    width: 91.6666666667%;
  }
  .col-xlg-10 {
    width: 83.3333333333%;
  }
  .col-xlg-9 {
    width: 75%;
  }
  .col-xlg-8 {
    width: 66.6666666667%;
  }
  .col-xlg-7 {
    width: 58.3333333333%;
  }
  .col-xlg-6 {
    width: 50%;
  }
  .col-xlg-5 {
    width: 41.6666666667%;
  }
  .col-xlg-4 {
    width: 33.3333333333%;
  }
  .col-xlg-3 {
    width: 25%;
  }
  .col-xlg-2 {
    width: 16.6666666667%;
  }
  .col-xlg-1 {
    width: 8.3333333333%;
  }
}

.col-auto {
  -ms-flex: 1 0 0px;
  -webkit-flex: 1 0 0px;
  flex: 1 0 0px;
}

@media (min-width: 576px) {
  .col-xs-auto {
    -ms-flex: 1 0 0px;
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
  }
}

@media (min-width: 768px) {
  .col-sm-auto {
    -ms-flex: 1 0 0px;
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
  }
}

@media (min-width: 992px) {
  .col-md-auto {
    -ms-flex: 1 0 0px;
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
  }
}

@media (min-width: 1200px) {
  .col-lg-auto {
    -ms-flex: 1 0 0px;
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
  }
}

@media (min-width: 1600px) {
  .col-xlg-auto {
    -ms-flex: 1 0 0px;
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
  }
}

.order-12 {
  -ms-flex-order: 12;
  -webkit-order: 12;
  order: 12;
}

.order-11 {
  -ms-flex-order: 11;
  -webkit-order: 11;
  order: 11;
}

.order-10 {
  -ms-flex-order: 10;
  -webkit-order: 10;
  order: 10;
}

.order-9 {
  -ms-flex-order: 9;
  -webkit-order: 9;
  order: 9;
}

.order-8 {
  -ms-flex-order: 8;
  -webkit-order: 8;
  order: 8;
}

.order-7 {
  -ms-flex-order: 7;
  -webkit-order: 7;
  order: 7;
}

.order-6 {
  -ms-flex-order: 6;
  -webkit-order: 6;
  order: 6;
}

.order-5 {
  -ms-flex-order: 5;
  -webkit-order: 5;
  order: 5;
}

.order-4 {
  -ms-flex-order: 4;
  -webkit-order: 4;
  order: 4;
}

.order-3 {
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}

.order-2 {
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

.order-1 {
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

.order-0 {
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
}

@media (min-width: 576px) {
  .order-xs-12 {
    -ms-flex-order: 12;
    -webkit-order: 12;
    order: 12;
  }
  .order-xs-11 {
    -ms-flex-order: 11;
    -webkit-order: 11;
    order: 11;
  }
  .order-xs-10 {
    -ms-flex-order: 10;
    -webkit-order: 10;
    order: 10;
  }
  .order-xs-9 {
    -ms-flex-order: 9;
    -webkit-order: 9;
    order: 9;
  }
  .order-xs-8 {
    -ms-flex-order: 8;
    -webkit-order: 8;
    order: 8;
  }
  .order-xs-7 {
    -ms-flex-order: 7;
    -webkit-order: 7;
    order: 7;
  }
  .order-xs-6 {
    -ms-flex-order: 6;
    -webkit-order: 6;
    order: 6;
  }
  .order-xs-5 {
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;
  }
  .order-xs-4 {
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;
  }
  .order-xs-3 {
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
  }
  .order-xs-2 {
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .order-xs-1 {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .order-xs-0 {
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
  }
}

@media (min-width: 768px) {
  .order-sm-12 {
    -ms-flex-order: 12;
    -webkit-order: 12;
    order: 12;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    -webkit-order: 11;
    order: 11;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    -webkit-order: 10;
    order: 10;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    -webkit-order: 9;
    order: 9;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    -webkit-order: 8;
    order: 8;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    -webkit-order: 7;
    order: 7;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    -webkit-order: 6;
    order: 6;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .order-sm-0 {
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
  }
}

@media (min-width: 992px) {
  .order-md-12 {
    -ms-flex-order: 12;
    -webkit-order: 12;
    order: 12;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    -webkit-order: 11;
    order: 11;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    -webkit-order: 10;
    order: 10;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    -webkit-order: 9;
    order: 9;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    -webkit-order: 8;
    order: 8;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    -webkit-order: 7;
    order: 7;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    -webkit-order: 6;
    order: 6;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .order-md-0 {
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
  }
}

@media (min-width: 1200px) {
  .order-lg-12 {
    -ms-flex-order: 12;
    -webkit-order: 12;
    order: 12;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    -webkit-order: 11;
    order: 11;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    -webkit-order: 10;
    order: 10;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    -webkit-order: 9;
    order: 9;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    -webkit-order: 8;
    order: 8;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    -webkit-order: 7;
    order: 7;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    -webkit-order: 6;
    order: 6;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .order-lg-0 {
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
  }
}

@media (min-width: 1600px) {
  .order-xlg-12 {
    -ms-flex-order: 12;
    -webkit-order: 12;
    order: 12;
  }
  .order-xlg-11 {
    -ms-flex-order: 11;
    -webkit-order: 11;
    order: 11;
  }
  .order-xlg-10 {
    -ms-flex-order: 10;
    -webkit-order: 10;
    order: 10;
  }
  .order-xlg-9 {
    -ms-flex-order: 9;
    -webkit-order: 9;
    order: 9;
  }
  .order-xlg-8 {
    -ms-flex-order: 8;
    -webkit-order: 8;
    order: 8;
  }
  .order-xlg-7 {
    -ms-flex-order: 7;
    -webkit-order: 7;
    order: 7;
  }
  .order-xlg-6 {
    -ms-flex-order: 6;
    -webkit-order: 6;
    order: 6;
  }
  .order-xlg-5 {
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;
  }
  .order-xlg-4 {
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;
  }
  .order-xlg-3 {
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
  }
  .order-xlg-2 {
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .order-xlg-1 {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .order-xlg-0 {
    -ms-flex-order: 0;
    -webkit-order: 0;
    order: 0;
  }
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

@media (min-width: 576px) {
  .offset-xs-11 {
    margin-left: 91.6666666667%;
  }
  .offset-xs-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xs-9 {
    margin-left: 75%;
  }
  .offset-xs-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xs-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xs-6 {
    margin-left: 50%;
  }
  .offset-xs-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xs-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xs-3 {
    margin-left: 25%;
  }
  .offset-xs-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xs-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xs-0 {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
}

@media (min-width: 992px) {
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
}

@media (min-width: 1200px) {
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
}

@media (min-width: 1600px) {
  .offset-xlg-11 {
    margin-left: 91.6666666667%;
  }
  .offset-xlg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xlg-9 {
    margin-left: 75%;
  }
  .offset-xlg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xlg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xlg-6 {
    margin-left: 50%;
  }
  .offset-xlg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xlg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xlg-3 {
    margin-left: 25%;
  }
  .offset-xlg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xlg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xlg-0 {
    margin-left: 0;
  }
}

.wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.no-wrap {
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.no-wrap [class*=col-] {
  -ms-flex-negative: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
}

.wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.direction-row {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.direction-row-reverse {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

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

.direction-column-reverse {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

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

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

.align-center {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.align-baseline {
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}

.align-content-start {
  -ms-flex-line-pack: start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

.align-content-end {
  -ms-flex-line-pack: end;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

.align-content-end [class*=col-] {
  vertical-align: bottom;
}

.align-content-center {
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

.align-content-space-between {
  -ms-flex-line-pack: justify;
  -webkit-align-content: space-between;
  align-content: space-between;
}

.align-content-space-around {
  -ms-flex-line-pack: distribute;
  -webkit-align-content: space-around;
  align-content: space-around;
}

.align-self-stretch {
  -ms-flex-item-align: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
}

.align-self-start {
  -ms-flex-item-align: start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

.align-self-end {
  -ms-flex-item-align: end;
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}

.align-self-center {
  -ms-flex-item-align: center;
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}

.align-self-baseline {
  -ms-flex-item-align: baseline;
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}

.justify-start {
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.justify-end {
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.justify-center {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.justify-space-between {
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.justify-space-around {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.grid-bleed [class*=col-] {
  padding: 0;
}

.col-grid {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.col-grid.direction-row {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.col-bleed {
  padding: 0;
}

.col-bleed-x {
  padding: 10px 0;
}

.col-bleed-y {
  padding: 0 10px;
}

.flex-img {
  display: block;
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
  width: 100%;
}

.flex-footer {
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
}

.flex-footer > :last-child {
  margin-bottom: 0;
}

.container,
.container-full {
  width: 100%;
  max-width: 100%;
  padding-right: 10px;
  padding-left: 10px;
}

.grid.no-padding-x {
  margin-top: -10px;
  margin-bottom: -10px;
}

@media (min-width: 0px) and (max-width: 575px) {
  .hidden-xxs {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .hidden-xs-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1599px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .hidden-lg {
    display: none !important;
  }
}

@media (min-width: 1600px) {
  .hidden-xlg {
    display: none !important;
  }
}

@font-face {
  font-family: "Euclid";
  src: url("/build/assets/euclid-regular-webfont-069c955a.woff2") format("woff2"), url("/build/assets/euclid-regular-webfont-1871d509.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Euclid";
  src: url("/build/assets/euclid-semibold-webfont-dfc47b75.woff2") format("woff2"), url("/build/assets/euclid-semibold-webfont-5e501ec0.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
}

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

body,
html {
  min-height: 100%;
  font-size: 10px;
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #2C2D2F;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app, #page-content {
  font-size: 1.5rem;
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#app {
  min-height: 100%;
}

.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
  overflow: hidden;
}

.flexbox .flexbox-col {
  height: 100%;
  flex: 1;
}

.flexbox-login {
  height: 100vh;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexbox-login #page-content {
  background-color: white;
}

.flexbox-login main {
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flexbox-login .login {
  width: 100%;
  max-width: 91rem;
  text-align: center;
  margin: 0 auto;
}

.flexbox-login .login form {
  max-width: 40rem;
  margin: 0 auto;
}

.flexbox-login .login h1 {
  margin-bottom: 2rem;
}

.flexbox-login .login .field label {
  display: block;
  text-align: left;
}

.flexbox-login .login .field input {
  width: 100%;
}

.flexbox-login .login .field.field-forgot {
  text-align: left;
  margin-top: -1rem;
}

.flexbox-login .login .field.field-forgot small {
  display: block;
}

.flexbox-login .login .btn {
  margin-top: 1rem;
}

.flexbox-login .login .col-5 {
  align-self: end;
}

.flexbox-login.switch #page-content {
  background-color: #FAF9F7;
}

@media screen and (max-width: 767px) {
  .flexbox-login main {
    min-height: 0;
  }
}

.container {
  padding: 3.5rem 2rem;
}

hr {
  border: 0;
  border-top: 1px solid #e2e4e3;
  margin: 4rem 0;
}

pre {
  margin: 2rem 0;
  padding: 1rem 2rem;
  border: 1px solid #DDDEDF;
  background-color: #fafafa;
}

small {
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: -0.02rem;
}

h1, .h1 {
  font-size: 2.6rem;
  line-height: 3.6rem;
  font-weight: bold;
  letter-spacing: -0.43px;
}

@media screen and (min-width: 991px) {
  h1, .h1 {
    font-size: 2.6rem;
    line-height: 3.6rem;
    letter-spacing: -0.043rem;
  }
}

h1.subtitle, .h1.subtitle {
  margin-bottom: 4rem;
}

h2, .h2 {
  font-size: 1.8rem;
  line-height: 2.5rem;
  font-weight: bold;
  letter-spacing: -0.03rem;
}

@media screen and (min-width: 991px) {
  h2, .h2 {
    font-size: 1.8rem;
    line-height: 2.5rem;
    letter-spacing: -0.03rem;
  }
}

h3, .h3 {
  font-size: 1.5rem;
  line-height: 1.875rem;
  font-weight: bold;
  letter-spacing: -0.025rem;
}

@media screen and (min-width: 991px) {
  h3, .h3 {
    font-size: 1.5rem;
    line-height: 1.875rem;
    letter-spacing: -0.025rem;
  }
}

h4, .h4 {
  font-family: ATSurt;
  font-size: 2.2rem;
  letter-spacing: -0.15px;
  line-height: 2.7rem;
}

h5, .h5 {
  color: #2C2D2F;
  font-size: 1.8rem;
  letter-spacing: -0.2px;
  line-height: 36px;
  text-align: left;
}

p {
  font-size: 1.5rem;
  line-height: 1.7rem;
  letter-spacing: -0.015rem;
  margin-top: 0;
  margin-bottom: 0.5em;
}

p:last-child {
  margin-bottom: 0;
}

p.p-sm {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

a {
  color: #4685FF;
  text-decoration: underline;
}

.in-green {
  color: #0BE96B !important;
}

.in-red {
  color: #E02020 !important;
}

.menu-link {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: -0.15px;
  line-height: 2rem;
  color: #2C2D2F;
  text-decoration: none;
}

.menu-link .menu-link__icon {
  max-width: 2rem;
  max-height: 2rem;
  width: 2rem;
}

.menu-link .menu-link__title {
  margin-left: 1.2rem;
  position: relative;
}

.menu-link:hover {
  text-decoration: underline;
}

.menu-link.active#inbox-link path.is-stroke {
  fill: #2C2D2F;
}

.menu-link.active#inbox-link path.is-fill {
  fill: #0BE96B;
}

#sidebar {
  background: #0BE96B;
  padding: 4rem 2.5rem;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 20rem;
}

#sidebar #sidebar__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#sidebar #sidebar__inner #sidebar__nav {
  flex-grow: 1;
}

#sidebar #sidebar__inner #sidebar__nav ul {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#sidebar #sidebar__inner #sidebar__nav ul li:last-child {
  margin-top: auto;
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  #sidebar #sidebar__inner {
    height: calc(100% - 5rem);
  }
}

#sidebar #sidebar__trigger {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

#sidebar #sidebar__trigger svg {
  display: block;
  width: 2rem;
}

#sidebar #sidebar__logo {
  margin-bottom: 4rem;
  display: flex;
}

#sidebar #sidebar__logo .logo {
  width: 100%;
  max-width: 10rem;
}

#sidebar #sidebar__nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

#sidebar #sidebar__nav ul li {
  display: flex;
  align-items: center;
}

#sidebar #sidebar__nav ul li + li {
  margin-top: 1.2rem;
}

#sidebar #sidebar__nav ul li .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E02020;
  color: #fff;
  height: 2.2rem;
  width: 2.2rem;
  margin-top: -0.2rem;
  margin-bottom: -0.3rem;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  margin-left: 1rem;
  font-weight: bold;
  padding: 2px 4px 0 4px;
  min-width: 2rem;
}

#sidebar #sidebar__nav .btn {
  font-size: 1rem;
}

@media screen and (max-width: 991px) {
  #sidebar {
    width: auto;
    padding: 1rem;
  }
  #sidebar #sidebar__trigger {
    margin-bottom: 2rem;
  }
  #sidebar #sidebar__logo {
    display: none;
  }
  #sidebar .menu-link__title {
    display: none;
  }
  #sidebar:not(.open) #sidebar__nav ul li {
    position: relative;
  }
  #sidebar:not(.open) #sidebar__nav ul li .badge {
    position: absolute;
    font-size: 0;
    right: 0;
    top: 0;
    margin-left: 0;
    padding: 0;
    height: 0.9rem;
    width: 0.9rem;
    min-width: 0.9rem;
    display: block;
  }
  #sidebar.open {
    width: 20rem;
  }
  #sidebar.open #sidebar__logo {
    display: block;
  }
  #sidebar.open .menu-link__title {
    display: block;
  }
}

.flexbox-login #sidebar #sidebar__logo .logo {
  max-width: 100%;
}

@media screen and (max-width: 991px) {
  .flexbox-login #sidebar {
    width: 100%;
    bottom: auto;
    height: auto;
    display: flex;
    justify-content: center;
  }
  .flexbox-login #sidebar #sidebar__logo {
    margin: 0 auto;
    display: block;
  }
  .flexbox-login #sidebar #sidebar__logo .logo {
    max-width: 12rem;
  }
  .flexbox-login #sidebar + #page-content {
    padding-left: 0;
    padding-top: 8.3rem;
    height: 100%;
  }
}

.card {
  border: 1px solid #e2e4e3;
  background-color: white;
  border-radius: 4px;
  min-height: 10rem;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
}

.card h3 {
  margin-bottom: 1rem;
}

.card-service .icon {
  margin-right: 1rem;
}

.card-switch .card-body {
  flex-grow: 1;
}

.card-switch a, .card-switch .pill {
  margin-left: auto;
}

@media screen and (max-width: 575px) {
  .card-switch {
    flex-direction: column;
  }
  .card-switch .card-action {
    margin-top: 1rem;
  }
  .card-switch > * {
    width: 100%;
  }
}

.card-payment {
  align-items: flex-start;
  flex-direction: column;
}

.card-payment .main-stat {
  width: 100%;
  min-width: 100%;
}

.card-payment .main-stat span {
  display: block;
  width: 100%;
  min-width: 100%;
}

.card-payment .main-stat .label {
  font-size: 1.2rem;
  color: #8F9197;
}

.card-payment .main-stat .reference {
  color: #8F9197;
  margin-bottom: 2.5rem;
}

.card-payment .payment-details {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 10rem;
  padding-top: 2rem;
}

.card-payment .payment-details .payment-detail {
  width: 50%;
  min-width: 10rem;
}

.card-payment .payment-details .label {
  display: block;
  font-size: 1.2rem;
  color: #8F9197;
  margin-bottom: 1rem;
  min-width: 100%;
}

.card-payment .payment-details .value {
  font-weight: bold;
  font-size: 1.8rem;
  min-width: 100%;
}

.card.card-form {
  max-width: 60rem;
}

.card.card-form .card__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card.card-form .card__content .card__title {
  margin-bottom: 2rem;
}

.card.card-form .card__content .card__title + .grid {
  margin-top: -1rem;
}

.card.card-form .card__content .control input {
  width: 100%;
}

.card-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.card-stat .stat-content {
  flex: 1 0 auto;
}

.card-stat .stat-image {
  flex-shrink: 1;
}

.multi-card-col .card {
  height: auto;
  flex-grow: 1;
}

.multi-card-col .card + .card {
  margin-top: 2rem;
}

.multi-card-col {
  display: flex;
  flex-direction: column;
}

.info-card {
  border: 1px solid #e2e4e3;
  background-color: white;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.info-card .info-card__title {
  background-color: #e2e4e3;
  padding: 1.5rem 2rem;
}

.info-card .info-card__content {
  padding: 2rem;
}

.info-card .info-card__content dl div + div {
  margin-top: 1rem;
}

.info-card .info-card__content dl dt {
  font-weight: bold;
}

.filters {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}

.filters .filters__button {
  align-self: flex-end;
}

.filters .filters__inputs {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.filters .filters__inputs .buttons {
  margin-left: auto;
  display: flex;
}

.filters .filters__inputs .buttons .btn {
  margin-left: 1rem;
}

.filters .filters__inputs .label {
  color: #8F9197;
}

.filters .filters__inputs:empty {
  display: none;
}

@media screen and (max-width: 991px) {
  .filters .filters__inputs {
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
  }
  .filters .filters__inputs > * {
    margin-right: 0;
    flex: 0 1 calc(50% - 0.5rem);
  }
  .filters .filters__inputs > .big-input {
    flex: 0 0 100%;
  }
}

@media screen and (max-width: 575px) {
  .filters .filters__inputs > * {
    flex: 0 1 100%;
  }
}

.filters.open .filters__button svg {
  transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
  .filters .filters__inputs {
    display: none;
  }
  .filters.open .filters__inputs {
    display: flex;
  }
}

.btn {
  display: inline-block;
  border-radius: 2rem;
  border: 0.2rem solid transparent;
  outline: none;
  letter-spacing: -0.25px;
  font-size: 1.5rem;
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.5rem;
  cursor: pointer;
  padding: 1.1rem 2rem 1rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-primary {
  background-color: #2C2D2F;
  border-color: #2C2D2F;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.btn-outline {
  background-color: transparent;
  color: #2C2D2F;
  border: 0.2rem solid #2C2D2F;
  text-decoration: none;
  font-weight: bold;
}

.btn-danger {
  background-color: transparent;
  color: #E02020;
  border: 0.2rem solid #E02020;
  text-decoration: none;
  font-weight: bold;
}

.btn:disabled {
  opacity: 0.4;
}

.pill {
  border-radius: 0.4rem;
  padding: 0.7rem 1.1rem 0.8rem;
  display: inline-flex;
  font-weight: normal;
  color: #fff;
  background-color: #4685FF;
}

.pill-administrator {
  background-color: #4685FF;
}

.pill-portal {
  background-color: #8F47FF;
}

.pill-billing {
  background-color: #8F9197;
}

.pill-indicator {
  background-color: rgba(11, 233, 107, 0.25);
  display: flex;
  color: #0BE96B;
}

.pill-indicator__icon {
  margin-right: 0.5rem;
}

.pill-new {
  background-color: #FF9B6B;
  color: #973709;
}

.pill.pill-inactive, .pill.pill-high {
  color: #E02020;
  background-color: rgba(224, 32, 32, 0.3);
}

.pill.pill-medium {
  color: #FA6400;
  background-color: rgba(221, 103, 46, 0.3);
}

.pill.pill-active, .pill.pill-low {
  color: #0BE96B;
  background-color: #C1FAD9;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.text-button {
  appearance: none;
  -wekit-appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #4685FF;
  text-decoration: underline;
  font-size: 1.5rem;
  line-height: 1.2;
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.text-button svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.5rem;
}

.sort-button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  font-size: 1.5rem;
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  color: #8F9197;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0;
  width: 100%;
}

.sort-button.sort-button--desc:after, .sort-button.sort-button--asc:after {
  content: "";
  background-image: url("/build/assets/icon--chervon-down-e7693572.svg");
  margin-left: 1rem;
  width: 1.2rem;
  height: 1.4rem;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.2rem 1.4rem;
  top: 0;
  position: relative;
}

.sort-button.sort-button--asc:after {
  transform: rotate(180deg);
}

.reset-button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
}

.no-results {
  margin: 3rem auto;
  text-align: center;
}

.no-results h4 {
  margin-bottom: 3rem;
}

.no-results img {
  width: 100%;
  max-width: 32rem;
  margin-bottom: 3rem;
}

.no-results .icon {
  margin: 2rem auto;
}

.no-results .icon img {
  margin-bottom: 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 10rem;
}

.service-card .service-card__heading {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  column-gap: 2rem;
}

.service-card .service-card__heading .service-card__title {
  margin-bottom: 0;
  position: relative;
  top: 0.1rem;
}

.service-card .service-card__details {
  padding: 0 1rem;
}

.service-card + .service-card {
  margin-top: 2rem;
  border-top: 0.1rem solid #e2e4e3;
  padding-top: 2rem;
}

.service-details {
  width: 100%;
  font-size: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2rem;
}

.service-details .service-details__item {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 33%;
  font-size: 1.5rem;
  line-height: 1.2;
}

.service-details .service-details__item > dt {
  min-width: 24rem;
  margin-bottom: 0.5rem;
  color: #8F9197;
  flex: 1 1 0;
}

.service-details .service-details__item > dd {
  margin-bottom: 0.5rem;
  flex: 1 0 calc(100% - 24rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 1599px) {
  .service-details .service-details__item {
    flex: 0 0 50%;
  }
}

@media screen and (max-width: 991px) {
  .service-details .service-details__item {
    flex-direction: column;
  }
  .service-details .service-details__item > dd {
    flex: 1 1 auto;
    white-space: break-spaces;
  }
}

@media screen and (max-width: 575px) {
  .service-details {
    padding: 0 !important;
  }
  .service-details .service-details__item {
    flex: 0 0 100%;
  }
  .service-details .service-details__item > dt {
    min-width: 0;
    margin-right: 2rem;
  }
}

@media screen and (max-width: 380px) {
  .service-details .service-details__item {
    flex: 0 0 100%;
  }
  .service-details .service-details__item > dt {
    width: 100%;
    margin-right: 0;
  }
}

.reading-form .reading-form__header {
  margin-bottom: 2rem;
}

.reading-form .reading-form__address {
  font-style: normal;
  font-weight: bold;
}

.reading-form .reading-form__history {
  margin-top: 2rem;
}

.reading-form .reading-form__history div {
  display: flex;
  align-items: flex-start;
  line-height: 2rem;
}

.reading-form .reading-form__history div + div {
  margin-top: 0.5rem;
}

.reading-form .reading-form__history div dt {
  margin-right: 0.5rem;
  color: #8F9197;
}

.reading-form .reading-form__history div dd {
  line-height: 2rem;
}

.reading-form .reading-form__last {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  margin: 1rem 0;
}

.reading-form .reading-form__last dl div {
  display: flex;
  align-items: flex-start;
  line-height: 2rem;
}

.reading-form .reading-form__last dl div + div {
  margin-top: 0.5rem;
}

.reading-form .reading-form__last dl div dt {
  margin-right: 0.5rem;
  color: #8F9197;
}

.reading-form .reading-form__last dl div dd {
  line-height: 2rem;
}

.reading-form-modal .modal__container {
  position: relative;
  max-width: 50rem;
  width: 100%;
  padding: 4rem 3rem;
}

.reading-form-modal .modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.reading-form-modal .modal__close svg {
  pointer-events: none;
  height: 1.5rem;
  width: 1.5rem;
}

.reading-form-modal .alert-success {
  margin-bottom: 0;
}

.reading-form-modal .reading-form + .reading-form {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 0.1rem solid #e2e4e3;
}

.last-readings .last-readings__head {
  display: flex;
}

.last-readings .last-readings__head > span {
  text-align: left;
  flex: 1 1 33%;
  color: #2C2D2F;
}

.last-readings .last-readings__body .last-readings__row {
  display: flex;
  row-gap: 1rem;
}

.last-readings .last-readings__body .last-readings__row > span {
  flex: 1 1 33%;
  color: #8F9197;
}

.dropdown {
  position: relative;
}

.dropdown .dropdown-menu {
  display: none;
  border: 1px solid #8F9197;
  padding: 1.5rem;
  background-color: white;
  border-radius: 0.4rem;
  width: 21rem;
}

.dropdown .dropdown-menu.active {
  display: block;
  position: absolute;
  top: 5rem;
  left: -5rem;
  z-index: 102;
}

.dropdown .dropdown-menu a {
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: #2C2D2F;
  padding: 1rem 0 1rem 0;
  border-bottom: 1px solid #DDDEDF;
}

.dropdown .dropdown-menu a .label {
  color: #8F9197;
  font-size: 0.8rem;
}

.dropdown .dropdown-item {
  display: flex;
  color: #2C2D2F;
}

.dropdown .dropdown-item .icon {
  margin-right: 1rem;
}

.dropdown .dropdown-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 101;
}

.dropdown .dropdown-bg.active {
  display: block;
}

.hover-details {
  position: relative;
}

.hover-details a {
  cursor: pointer;
}

.hover-details .hover-panel {
  display: none;
  border: 1px solid #8F9197;
  padding: 1.5rem;
  background-color: white;
  border-radius: 0.4rem;
  width: 43rem;
}

.hover-details .hover-panel dl {
  width: 100%;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.hover-details .hover-panel dl dt {
  min-width: 10rem;
  display: inline-block;
  color: #8F9197;
  margin-bottom: 0.5rem;
}

.hover-details .hover-panel dl dd {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.hover-details .hover-panel.active {
  display: block;
  position: absolute;
  top: 2.5rem;
  z-index: 102;
}

.hover-details .hover-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 101;
}

.hover-details .hover-bg.active {
  display: block;
}

.alert {
  position: relative;
  padding: 1rem 2.5rem;
  margin-bottom: 3rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: #F5BCBC;
  color: #E02020;
  font-size: 1.5rem;
  white-space: break-spaces;
}

.alert strong {
  margin-right: 2rem;
}

.alert-success {
  background-color: rgba(11, 233, 107, 0.25);
  color: #0BE96B;
}

.alerts {
  margin-bottom: 2rem;
}

.alerts > *:last-child {
  margin-bottom: 0;
}

.tabs {
  display: flex;
  margin-bottom: 2rem;
  border-bottom: 1px solid #e2e4e3;
  margin-top: 3rem;
  list-style: none;
}

.tabs .tab {
  display: flex;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.tabs .tab a, .tabs .tab button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  box-shadow: none;
  color: #8F9197;
  text-decoration: none;
  padding: 0 1.5rem 2.5rem 1.5rem;
  border-bottom: 2px solid transparent;
  font-size: 1.5rem;
  line-height: 1.7rem;
  letter-spacing: -0.015rem;
}

.tabs .tab a:hover, .tabs .tab button:hover {
  color: #2C2D2F;
}

.tabs .tab a.active, .tabs .tab button.active {
  border-bottom: 3px solid #0BE96B;
  color: #2C2D2F;
}

.tabs.tabs--slim {
  border-bottom: none;
}

.tabs.tabs--slim .tab {
  margin: 0 1rem;
}

.tabs.tabs--slim .tab:first-child {
  margin-left: 0;
}

.tabs.tabs--slim .tab:last-child {
  margin-right: 0;
}

.tabs.tabs--slim .tab a, .tabs.tabs--slim .tab button {
  padding: 1rem 0.5rem;
  border-bottom: none;
  font-size: 1.5rem;
  line-height: 1.7rem;
  letter-spacing: -0.015rem;
  position: relative;
}

.tabs.tabs--slim .tab a:after, .tabs.tabs--slim .tab button:after {
  content: "";
  height: 0.1rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.2s linear;
}

.tabs.tabs--slim .tab a.active, .tabs.tabs--slim .tab button.active {
  color: #2C2D2F;
}

.tabs.tabs--slim .tab a.active:after, .tabs.tabs--slim .tab button.active:after {
  background-color: #0BE96B;
  height: 0.3rem;
}

.pagination {
  list-style: none;
  display: flex;
  padding-left: 0;
  margin: 4rem auto 2rem auto;
  align-items: center;
  justify-content: center;
}

.pagination li a {
  position: relative;
  display: block;
  color: #4685FF;
  padding: 0.6rem 1rem;
  cursor: pointer;
  text-decoration: underline;
}

.pagination li.previous, .pagination li.next {
  display: none;
}

.pagination li.selected a {
  background-color: transparent;
  color: #2C2D2F;
  text-decoration: none;
}

.ticket {
  max-width: 77rem;
}

.ticket-details {
  padding: 2rem 0;
}

.ticket-details .status {
  margin-bottom: 2rem;
  min-width: 77rem;
}

.ticket-details ul {
  list-style: none;
}

.ticket-details ul li {
  margin-bottom: 2rem;
}

.ticket-details ul li .label {
  display: inline-block;
  margin-right: 1rem;
  min-width: 12rem;
}

.ticket-details ul li .value {
  color: #8F9197;
}

.ticket-comment {
  padding: 4rem 0 6rem 0;
  border-bottom: 1px solid #DDDEDF;
}

.ticket-comment .ticket-comment-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.5rem;
}

.ticket-comment .ticket-comment-header .ticket-comment-date {
  margin-left: auto;
  color: #8F9197;
}

.ticket-comment .ticket-comment-attachment {
  margin: 1rem 0;
}

.ticket-reply {
  padding-top: 4rem;
}

.ticket-reply textarea {
  width: 100% !important;
  max-width: 100% !important;
}

.collapsible .collapsible__button {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  position: relative;
  width: 100%;
  display: block;
  text-align: left;
  min-height: 100%;
  font-size: 1.5rem;
  font-family: "ATSurt", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #4685FF;
  text-decoration: underline;
  padding: 1rem 1rem 1rem 0;
  cursor: pointer;
}

.collapsible .collapsible__button:after {
  content: "";
  height: 1.4rem;
  width: 1.2rem;
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  background-image: url("/build/assets/icon--chervon-down-e7693572.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.2rem 1.4rem;
}

.collapsible .collapsible__content {
  height: 0;
  overflow: hidden;
}

.collapsible .collapsible__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.collapsible .collapsible__content ul li + li {
  margin-top: 1rem;
}

.collapsible .collapsible__content ul li a, .collapsible .collapsible__content ul li .text-button {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.collapsible.empty .collapsible__text {
  font-size: 1.5rem;
  font-family: "ATSurt", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #2C2D2F;
  padding: 1rem 1rem 1rem 0;
}

.collapsible.open .collapsible__button:after {
  transform: rotate(180deg);
}

.collapsible.open .collapsible__content {
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.breadcrumbs {
  background-color: white;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.breadcrumbs .breadcrumbs__item {
  display: flex;
  align-items: center;
}

.breadcrumbs .breadcrumbs__item + .breadcrumbs__item:before {
  content: "/";
  display: block;
  margin: 0 0.6rem 0 0;
}

.breadcrumbs a {
  cursor: pointer;
}

@media screen and (max-width: 575px) {
  .breadcrumbs {
    display: none;
  }
}

.stat {
  container-type: inline-size;
  border: 1px solid #e2e4e3;
  background-color: white;
  border-radius: 4px;
  padding: 2rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.stat .stat__content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.stat .stat__content .stat__number {
  font-size: 2.6rem;
  line-height: 3.6rem;
  letter-spacing: -0.043rem;
  margin-bottom: auto;
}

.stat .stat__content .stat__title {
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.stat .stat__content .stat__descriptor {
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #8F9197;
}

.stat .stat__image {
  flex-shrink: 1;
  max-width: 15rem;
  margin-left: 2rem;
  align-self: center;
}

.stat .stat__image img {
  max-width: 100%;
}

.multi-card-col .stat {
  height: auto;
  flex-grow: 1;
}

.multi-card-col .stat + .stat {
  margin-top: 2rem;
}

@container (max-width: 422px) {
  .stat .stat__image {
    max-width: 9rem;
  }
}

@container (max-width: 342px) {
  .stat {
    flex-direction: column;
  }
  .stat .stat__content {
    justify-content: flex-start;
  }
  .stat .stat__content .stat__number {
    margin-bottom: 0 !important;
  }
  .stat .stat__image {
    margin-left: auto;
    margin-right: 0;
    max-width: 13rem;
    margin-top: 2rem;
  }
  .stat.is-loading .stat__image {
    max-height: 8.6rem;
    margin-top: 0.5rem;
    width: 100%;
  }
}

@container (min-height: 175px) {
  .stat {
    flex-direction: column;
  }
  .stat .stat__content {
    justify-content: flex-start;
  }
  .stat .stat__content .stat__number {
    margin-bottom: 0 !important;
  }
  .stat .stat__image {
    margin-left: auto;
    margin-right: 0;
    max-width: 13rem;
  }
  .stat.is-loading .stat__image {
    max-height: 8.6rem;
    margin-top: 0.5rem;
    width: 100%;
  }
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

.dashboard .dashboard__balance {
  container-type: size;
  grid-area: 1/1/2/5;
}

.dashboard .dashboard__trees {
  container-type: size;
  grid-area: 2/1/3/5;
}

.dashboard .dashboard__reconciliation {
  container-type: inline-size;
  grid-area: 1/5/3/9;
}

.dashboard .dashboard__active {
  container-type: inline-size;
  grid-area: 1/9/3/13;
}

.dashboard .dashboard__contracts {
  container-type: inline-size;
  grid-area: 3/1/4/7;
}

.dashboard .dashboard__notices {
  container-type: inline-size;
  grid-area: 3/7/4/13;
}

.dashboard .dashboard__under {
  container-type: inline-size;
  grid-area: 4/1/5/7;
}

.dashboard .dashboard__over {
  container-type: inline-size;
  grid-area: 4/7/5/13;
}

@media screen and (max-width: 1199px) {
  .dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 0.5fr repeat(3, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .dashboard .dashboard__balance {
    grid-area: 1/1/2/7;
  }
  .dashboard .dashboard__trees {
    grid-area: 1/7/2/13;
  }
  .dashboard .dashboard__reconciliation {
    grid-area: 2/1/3/7;
  }
  .dashboard .dashboard__active {
    grid-area: 2/7/3/13;
  }
  .dashboard .dashboard__contracts {
    grid-area: 3/1/4/7;
  }
  .dashboard .dashboard__notices {
    grid-area: 3/7/4/13;
  }
  .dashboard .dashboard__under {
    grid-area: 4/1/5/7;
  }
  .dashboard .dashboard__over {
    grid-area: 4/7/5/13;
  }
}

@media screen and (max-width: 991px) {
  .dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .dashboard .dashboard__balance {
    container-type: inline-size;
    grid-area: 1/1/2/3;
  }
  .dashboard .dashboard__trees {
    container-type: inline-size;
    grid-area: 2/1/3/3;
  }
  .dashboard .dashboard__reconciliation {
    grid-area: 3/1/4/2;
  }
  .dashboard .dashboard__active {
    grid-area: 3/2/4/3;
  }
  .dashboard .dashboard__contracts {
    grid-area: 4/1/5/2;
  }
  .dashboard .dashboard__notices {
    grid-area: 4/2/5/3;
  }
  .dashboard .dashboard__under {
    grid-area: 5/1/6/3;
    margin-top: 2rem;
  }
  .dashboard .dashboard__over {
    grid-area: 6/1/7/3;
    margin-top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, auto);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .dashboard .dashboard__balance {
    grid-area: 1/1/2/3;
  }
  .dashboard .dashboard__trees {
    grid-area: 2/1/3/3;
  }
  .dashboard .dashboard__reconciliation {
    grid-area: 3/1/4/2;
  }
  .dashboard .dashboard__active {
    grid-area: 3/2/4/3;
  }
  .dashboard .dashboard__contracts {
    grid-area: 4/1/5/3;
  }
  .dashboard .dashboard__notices {
    grid-area: 5/1/6/3;
  }
  .dashboard .dashboard__under {
    grid-area: 6/1/7/3;
  }
  .dashboard .dashboard__over {
    grid-area: 7/1/8/3;
  }
}

@media screen and (max-width: 575px) {
  .dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, auto);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .dashboard .dashboard__balance {
    grid-area: 1/1/2/3;
  }
  .dashboard .dashboard__trees {
    grid-area: 2/1/3/3;
  }
  .dashboard .dashboard__reconciliation {
    grid-area: 3/1/4/3;
  }
  .dashboard .dashboard__active {
    grid-area: 4/1/5/3;
  }
  .dashboard .dashboard__contracts {
    grid-area: 5/1/6/3;
  }
  .dashboard .dashboard__notices {
    grid-area: 6/1/7/3;
  }
  .dashboard .dashboard__under {
    grid-area: 7/1/8/3;
  }
  .dashboard .dashboard__over {
    grid-area: 8/1/9/3;
  }
}

@container (min-height: 170px) {
  .dashboard__balance .stat,
  .dashboard__trees .stat {
    flex-direction: column;
  }
}

@container (max-width: 344px) {
  .dashboard__reconciliation .piechart.is-loading,
  .dashboard__active .piechart.is-loading {
    display: flex !important;
    flex-direction: column;
  }
  .dashboard__reconciliation .piechart.is-loading > *,
  .dashboard__active .piechart.is-loading > * {
    width: 100%;
  }
  .dashboard__reconciliation .piechart.is-loading .piechart__legend,
  .dashboard__active .piechart.is-loading .piechart__legend {
    width: 100%;
  }
  .dashboard__reconciliation .piechart.is-loading .piechart__chart img,
  .dashboard__active .piechart.is-loading .piechart__chart img {
    margin: 0 auto;
  }
}

.last-updated {
  font-size: 1.5rem;
  line-height: 2.2rem;
  letter-spacing: -0.29px;
  color: #8F9197;
  margin-top: 3rem;
  display: block;
}

#react-tiny-popover-container {
  z-index: 9999;
}

.barchart .popover-trigger, .piechart .popover-trigger {
  position: absolute;
  right: 2rem;
  top: 2.2rem;
}

.barchart .popover-trigger svg, .piechart .popover-trigger svg {
  height: 2rem;
  width: 2rem;
}

.popover .popover__content {
  background-color: #4685FF;
  color: white;
  border-radius: 1rem;
  max-width: 24rem;
  padding: 1rem;
  text-align: center;
}

.popover .popover__content .h1, .popover .popover__content .h2, .popover .popover__content .h3,
.popover .popover__content h1, .popover .popover__content h2, .popover .popover__content h3 {
  margin-bottom: 0.3em;
}

@media screen and (max-width: 991px) {
  .properties-table .table__body tr td[data-column-title=Address] {
    flex: 0 0 100%;
  }
  .properties-table .table__body tr td[data-column-title=Address] a {
    text-wrap: wrap;
  }
  .properties-table .table__body tr td[data-column-title=Address]:before {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .meter-readings-table .table__body tr td {
    order: 2;
  }
  .meter-readings-table .table__body tr td[data-column-title=Address] {
    order: 1;
    flex: 0 0 100%;
  }
  .meter-readings-table .table__body tr td[data-column-title=Address] a {
    text-wrap: wrap;
  }
  .meter-readings-table .table__body tr td[data-column-title=Address]:before {
    display: none;
  }
  .meter-readings-table .table__body tr td[data-column-title=Status] {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .meter-readings-table .table__body tr td[data-column-title=Status]:before {
    width: 100%;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 991px) {
  .inbox-table .table__body tr td {
    order: 3;
  }
  .inbox-table .table__body tr td[data-column-title=Address] {
    flex: 1 1 calc(100% - 10rem);
    order: 1;
  }
  .inbox-table .table__body tr td[data-column-title=Address]:before {
    display: none;
  }
  .inbox-table .table__body tr td[data-column-title=Priority] {
    flex: 0 1 8rem;
    order: 2;
  }
  .inbox-table .table__body tr td[data-column-title=Priority] .pills {
    justify-content: flex-end;
  }
  .inbox-table .table__body tr td[data-column-title=Priority]:before {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .inbox-table .table__body tr td[data-column-title=Priority] {
    order: 4;
  }
  .inbox-table .table__body tr td[data-column-title=Priority] .pills {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 991px) {
  .location-breakdown-table .table__body tr td {
    order: 2;
  }
  .location-breakdown-table .table__body tr td[data-column-title=Address] {
    order: 1;
    flex: 0 0 100%;
  }
  .location-breakdown-table .table__body tr td[data-column-title=Address] a {
    text-wrap: wrap;
  }
  .location-breakdown-table .table__body tr td[data-column-title=Address]:before {
    display: none;
  }
}

@media screen and (min-width: 576px) and (max-width: 991px) {
  .forecast-table .table__body tr td[data-column-title=Address] {
    flex: 1 0 70%;
  }
  .forecast-table .table__body tr td[data-column-title="Total Amount"] {
    flex: 0 1 20%;
    text-align: right !important;
  }
}

@media screen and (max-width: 991px) {
  .account-list-table .table__body tr td[data-column-title=Name] {
    flex: 0 0 100%;
  }
  .account-list-table .table__body tr td[data-column-title=Name]:before {
    display: none;
  }
  .account-list-table .table__body tr td[data-column-title=Roles] {
    flex: 0 0 100%;
  }
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 480px) {
  .table-responsive .tabs, .table-responsive .table {
    min-width: 53rem;
  }
}

.table {
  width: 100%;
  caption-side: bottom;
  border-collapse: collapse;
  padding: 0.5rem;
}

.table .table__header tr,
.table .table__body tr {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 1px solid #e2e4e3;
  column-gap: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.table .table__header tr th,
.table .table__body tr th {
  font-weight: normal;
  color: #8F9197;
  text-align: left;
}

.table .table__header tr td, .table .table__header tr th,
.table .table__body tr td,
.table .table__body tr th {
  padding: 1rem 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
}

.table .table__header tr td .icons, .table .table__header tr th .icons,
.table .table__body tr td .icons,
.table .table__body tr th .icons {
  display: flex;
  align-items: center;
  width: 100%;
}

.table .table__header tr td .icons .icon, .table .table__header tr th .icons .icon,
.table .table__body tr td .icons .icon,
.table .table__body tr th .icons .icon {
  margin-right: 0.5rem;
}

.table .table__header tr td.cell-type-meter-reading, .table .table__header tr th.cell-type-meter-reading,
.table .table__body tr td.cell-type-meter-reading,
.table .table__body tr th.cell-type-meter-reading {
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 2rem;
}

.table .table__header tr td.cell-type-collapsible, .table .table__header tr th.cell-type-collapsible,
.table .table__body tr td.cell-type-collapsible,
.table .table__body tr th.cell-type-collapsible {
  padding: 0;
}

.table .table__header tr td.grow, .table .table__header tr th.grow,
.table .table__body tr td.grow,
.table .table__body tr th.grow {
  flex-grow: 1;
}

@media screen and (max-width: 991px) {
  .table {
    min-width: 0 !important;
    width: 100%;
  }
  .table .table__header {
    display: none;
  }
  .table .table__body tr {
    flex-wrap: wrap;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .table .table__body tr td {
    width: auto !important;
    flex: 0 0 calc(50% - 0.5rem);
    color: #2C2D2F;
  }
  .table .table__body tr td:before {
    content: attr(data-column-title);
    display: block;
    color: #8F9197;
    margin-bottom: 0.5rem;
  }
  .table .table__body tr:first-child {
    padding-top: 0;
  }
}

@media screen and (max-width: 575px) {
  .table .table__body tr {
    padding: 2rem 0;
  }
  .table .table__body tr td {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
  }
  .table .table__body tr td .cell-skeleton {
    width: 100%;
  }
  .table .table__body tr td:before {
    margin-bottom: 0;
    margin-right: 1rem;
  }
}

@media screen and (max-width: 420px) {
  .table .table__body tr td {
    flex-direction: column;
    align-items: flex-start;
  }
  .table .table__body tr td:before {
    margin-bottom: 0.5rem;
    margin-right: 0;
  }
}

.no-data .table tbody {
  font-weight: normal;
  color: #8F9197;
}

.meter-reading .meter-reading__title {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.meter-reading .meter-reading__title .icon {
  margin-right: 1rem;
}

.section + .section {
  margin-top: 4rem;
}

.section .section__header {
  margin-bottom: 3rem;
  display: flex;
  align-items: baseline;
}

.section .section__header .sub-title {
  font-size: 1.5rem;
  line-height: 2.2rem;
  letter-spacing: -0.29px;
  color: #8F9197;
  margin-left: 3rem;
}

.section .section__header input[type=search] {
  justify-self: flex-end;
  margin-left: auto;
}

.section .section__header.with-search-input {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 991px) {
  .section .section__header.with-search-input {
    flex-direction: row;
  }
}

@media screen and (max-width: 767px) {
  .section .section__header.with-search-input {
    flex-direction: column;
    align-items: flex-start;
  }
  .section .section__header.with-search-input + .filters {
    margin-top: -2rem;
  }
  .section .section__header.with-search-input h1 {
    margin-bottom: 2rem;
  }
  .section .section__header.with-search-input input[type=search] {
    margin-right: auto;
    margin-left: 0;
    width: 100%;
  }
}

.section .section__header.with-actions {
  display: flex;
  align-items: center;
}

.section .section__header.with-actions .section__actions {
  margin-left: auto;
  display: flex;
  gap: 1rem;
}

@media screen and (max-width: 991px) {
  .section .section__header.with-actions {
    flex-direction: row;
  }
}

@media screen and (max-width: 767px) {
  .section .section__header.with-actions {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2rem;
  }
  .section .section__header.with-actions h1 {
    margin-bottom: 2rem;
  }
  .section .section__header.with-actions .section__actions {
    margin-left: 0;
  }
}

@media screen and (max-width: 991px) {
  .section .section__header {
    flex-direction: column;
  }
  .section .section__header #page-title {
    margin-bottom: 1rem;
  }
  .section .section__header #page-title:last-child {
    margin-bottom: 0;
  }
  .section .section__header .sub-title {
    margin-left: 0;
  }
}

.barchart {
  display: grid;
  grid-template-columns: 20rem repeat(5, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-column-gap: 0;
  grid-row-gap: 0;
  border: 1px solid #e2e4e3;
  background-color: white;
  border-radius: 4px;
  padding: 2rem;
  height: 100%;
}

.barchart .barchart__title {
  grid-area: 1/1/2/2;
  margin-bottom: 2rem;
}

.barchart .barchart__count {
  grid-area: 2/1/4/2;
  display: flex;
  flex-direction: column;
}

.barchart .barchart__count .barchart__stat {
  margin-bottom: 1rem;
}

.barchart .barchart__count .barchart__subtitle {
  font-weight: bold;
}

.barchart .barchart__count .barchart__descriptor {
  color: #8F9197;
}

.barchart .barchart__tabs {
  grid-area: 1/2/2/7;
  padding-right: 5rem;
}

.barchart .barchart__tabs .tabs {
  margin: 0 auto 2rem;
  width: 100%;
}

.barchart .barchart__tabs .tabs.tabs--slim .tab a, .barchart .barchart__tabs .tabs.tabs--slim .tab button {
  padding-top: 0.5rem;
}

.barchart .barchart__chart {
  grid-area: 2/2/4/7;
  position: relative;
}

.barchart .barchart__nodata {
  width: calc(100% - 3rem);
  position: absolute;
  top: 0;
  bottom: 3rem;
  margin: auto;
  line-height: 1.5rem;
  height: 1.5rem;
  color: #8F9197;
  right: 0;
  text-align: center;
}

.barchart .recharts-xAxis .recharts-cartesian-axis-tick .recharts-text {
  transform-origin: -3% -2%;
}

.barchart .recharts-cartesian-grid-horizontal line {
  shape-rendering: crispedges;
}

.barchart .recharts-cartesian-grid-horizontal line:first-child, .barchart .recharts-cartesian-grid-horizontal line:last-child {
  display: none;
}

.barchart.barchart--payments .recharts-xAxis .recharts-cartesian-axis-tick .recharts-text {
  transform-origin: -1% -1%;
}

@container (max-width: 670px) {
  .barchart .barchart__title {
    grid-area: 1/1/2/7;
    padding-right: 5rem;
    margin-bottom: 1rem;
  }
  .barchart .barchart__tabs {
    grid-area: 2/4/3/7;
    padding-right: 0;
  }
  .barchart .barchart__tabs .tabs {
    margin-bottom: 0;
    justify-content: flex-end;
  }
  .barchart .barchart__count {
    grid-area: 2/1/3/4;
    margin-bottom: 0;
    align-items: baseline;
    flex-direction: row;
  }
  .barchart .barchart__count .h1 {
    line-height: 2.6rem;
    margin-right: 0.4rem;
  }
  .barchart .barchart__count .barchart__subtitle {
    margin-right: 0.4rem;
  }
  .barchart .barchart__chart {
    grid-area: 3/1/4/7;
    margin-top: 1rem;
  }
  .barchart.barchart--payments .barchart__count {
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .barchart.barchart--payments .barchart__count .barchart__stat {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

@container (max-width: 500px) {
  .barchart {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
  .barchart .barchart__title {
    grid-area: 1/1/2/7;
    margin-bottom: 1rem;
  }
  .barchart .barchart__count {
    grid-area: 2/1/3/7;
    align-items: flex-end;
    flex-direction: column;
    margin-bottom: 2rem;
    justify-content: flex-start;
  }
  .barchart .barchart__count .barchart__stat {
    margin-right: 0;
    margin-bottom: 0;
  }
  .barchart .barchart__tabs {
    grid-area: 3/1/4/7;
  }
  .barchart .barchart__chart {
    grid-area: 4/1/5/7;
  }
  .barchart.barchart--multi .barchart__count {
    margin-bottom: 2rem;
  }
  .barchart.barchart--payments .barchart__count .barchart__stat {
    text-align: right;
  }
}

.pie-legend {
  display: flex;
  align-items: flex-start;
  font-size: 1.5rem;
  line-height: 1.5rem;
  column-gap: 1rem;
  min-width: 17rem;
}

.pie-legend .pie-legend__dot {
  transform: translateY(0.1rem);
}

.pie-legend .pie-legend__values {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pie-legend .pie-legend__values span {
  color: #8F9197;
  margin-top: 0.5rem;
}

.pie-legend + .pie-legend {
  padding-top: 1.4rem;
  margin-top: 1.4rem;
  border-top: 0.1rem solid #e2e4e3;
}

.recharts-legend-wrapper {
  container-type: inline-size;
  container-name: pieLegend;
}

@container pieLegend (min-width: 500px) {
  .recharts-pie-legend {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
  }
  .recharts-pie-legend .pie-legend {
    flex: 0 1 calc(33% - 0.5rem);
    min-width: 0;
  }
  .recharts-pie-legend .pie-legend + .pie-legend {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
  }
  .recharts-pie-legend .pie-legend:nth-child(3) ~ .pie-legend {
    padding-top: 1.4rem;
    margin-top: 1.4rem;
    border-top: 0.1rem solid #e2e4e3;
  }
}

.piechart {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e2e4e3;
  background-color: white;
  border-radius: 4px;
  padding: 2rem;
}

.piechart .piechart__title {
  width: 100%;
}

.piechart .piechart__chart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.piechart .piechart__chart .recharts-responsive-container {
  position: relative;
}

.piechart .piechart__legend {
  align-self: center;
}

.piechart .piechart__total {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 3rem;
}

.piechart .piechart__nodata {
  width: calc(100% - 18rem);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  line-height: 1.5rem;
  height: 1.5rem;
  color: #8F9197;
  left: 0;
  text-align: center;
}

.piechart.is-loading {
  display: grid;
  grid-template-columns: auto 18rem;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

.piechart.is-loading .piechart__title {
  grid-area: 1/1/2/3;
}

.piechart.is-loading .piechart__chart {
  grid-area: 2/1/3/2;
}

.piechart.is-loading .piechart__chart img {
  aspect-ratio: 190/190;
  width: 100%;
  max-width: 19rem;
  border-radius: 50%;
  margin: 0 auto 0 0;
}

.piechart.is-loading .piechart__legend {
  grid-area: 2/2/3/3;
}

.piechart.is-loading .piechart__legend .legend {
  list-style: none;
  padding: 0;
  margin: 0;
}

.piechart.is-loading .piechart__legend .legend li + li {
  margin-top: 2rem;
}

@container (max-width: 300px) {
  .piechart__chart {
    align-items: flex-start !important;
  }
  .piechart__chart .piechart__nodata {
    bottom: auto;
    right: 0;
    top: 9rem;
    width: 100%;
  }
  .piechart__chart .pie-legend {
    min-width: 100%;
  }
}

.chart .react-loading-skeleton {
  margin-right: 3rem;
}

.chart .skeleton-chart {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.chart .skeleton-chart .skeleton-dummy-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart .skeleton-chart .skeleton-dummy-bar .dummy-label {
  margin-top: 1rem;
}

.ct-chart-donut .ct-green .ct-slice-donut {
  stroke: #0BE96B;
}

.ct-chart-donut .ct-orange .ct-slice-donut {
  stroke: #FF7A3A;
}

.ct-chart-donut .ct-red .ct-slice-donut {
  stroke: #E02020;
}

.ct-chart-donut .ct-blue .ct-slice-donut {
  stroke: #4685FF;
}

.ct-chart-donut .ct-electricity .ct-slice-donut {
  stroke: #FAFF2C;
}

.ct-chart-donut .ct-broadband .ct-slice-donut {
  stroke: #C855E1;
}

.ct-chart-donut .ct-gas .ct-slice-donut {
  stroke: #DD672E;
}

.ct-chart-donut .ct-water .ct-slice-donut {
  stroke: #4685FF;
}

.ct-chart-donut .ct-tvl .ct-slice-donut {
  stroke: #8F47FF;
}

.ct-legend {
  position: relative;
  z-index: 10;
}

.ct-legend li {
  position: relative;
  padding-left: 23px;
  margin-bottom: 3px;
}

.ct-legend li:before {
  width: 12px;
  height: 12px;
  position: absolute;
  left: 0;
  content: "";
  border: 3px solid transparent;
  border-radius: 2px;
}

.ct-legend li.inactive:before {
  background: transparent;
}

.ct-legend.ct-legend-inside {
  position: absolute;
  top: 0;
  right: 0;
}

.ct-electricity {
  background-color: #FAFF2C !important;
  stroke: #FAFF2C !important;
}

.ct-electricity-prev {
  background-color: #d9df00 !important;
  stroke: #d9df00 !important;
}

.ct-water {
  background-color: #4685FF !important;
  stroke: #4685FF !important;
}

.ct-water-prev {
  background-color: #0055f9 !important;
  stroke: #0055f9 !important;
}

.ct-broadband {
  background-color: #C855E1 !important;
  stroke: #C855E1 !important;
}

.ct-broadband-prev {
  background-color: #a923c6 !important;
  stroke: #a923c6 !important;
}

.ct-gas {
  background-color: #DD672E !important;
  stroke: #DD672E !important;
}

.ct-gas-prev {
  background-color: #a4471b !important;
  stroke: #a4471b !important;
}

.ct-tvl {
  background-color: #8F47FF !important;
  stroke: #8F47FF !important;
}

.ct-tvl-prev {
  background-color: #6200fa !important;
  stroke: #6200fa !important;
}

.ct-blue {
  background-color: #4685FF !important;
}

.ct-green {
  background-color: #0BE96B !important;
}

.ct-orange {
  background-color: #FF7A3A !important;
}

.ct-red {
  background-color: #E02020 !important;
}

.legend-indicator {
  align-self: center;
}

.ct-axis-title {
  font-size: 1rem;
  line-height: 1;
  fill: rgba(0, 0, 0, 0.4);
}

.recharts-default-tooltip {
  background-color: #2C2D2F !important;
  border: none !important;
  color: white !important;
  border-radius: 1rem;
  padding: 1rem 1rem !important;
  min-width: 9rem;
  font-size: 1.5rem;
}

.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item {
  padding: 0 !important;
}

.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item .recharts-tooltip-item-unit,
.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item .recharts-tooltip-item-separator,
.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item .recharts-tooltip-item-name {
  display: none;
}

.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item .recharts-tooltip-item-value {
  color: white !important;
}

.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item .tooltip-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item .tooltip-content svg {
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.6rem;
  margin-right: 0.5rem;
}

.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item .tooltip-content span {
  line-height: 1;
}

.recharts-default-tooltip .recharts-tooltip-item-list .recharts-tooltip-item + .recharts-tooltip-item {
  margin-top: 1rem;
}

.recharts-default-tooltip.arrow-down {
  position: relative;
}

.recharts-default-tooltip.arrow-down:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1.5rem solid #2C2D2F;
  left: 0;
  right: 0;
  top: calc(100% - 0.1rem);
  margin: auto;
}

.recharts-default-legend {
  list-style: none;
  padding: 0;
}

.recharts-default-legend .recharts-legend-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.recharts-default-legend .recharts-legend-item + .recharts-legend-item {
  margin-top: 1rem;
}

.recharts-default-legend .recharts-legend-item svg {
  margin-right: 0.5rem;
  transform: translateY(-0.2rem);
}

.recharts-default-legend .recharts-legend-item .recharts-legend-item-value {
  line-height: 1;
  margin-right: 0.5rem;
}

.recharts-default-legend .recharts-legend-item .recharts-legend-item-perc {
  line-height: 1;
  color: #8F9197;
}

input[type=search] {
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  width: 25rem;
  height: 4rem;
  padding: 0.9rem 1rem 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: -0.015rem;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 0.1rem solid rgba(143, 145, 151, 0.37);
  border-radius: 0.5rem;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  position: relative;
}

input[type=search].big-input {
  width: 100%;
  height: 5rem;
  padding: 1.6rem 4rem 1.4rem 1.5rem;
}

input[type=search].search-input {
  background-image: url("/build/assets/mag-glass-928bb133.svg");
  background-repeat: no-repeat;
  background-size: 1.4rem;
  background-color: white;
  background-position: calc(100% - 1.5rem) center;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.3rem;
  margin: auto;
  height: 1.6rem;
  width: 1.6rem;
  background-image: url("/build/assets/icon--close-eb0d346b.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  background-color: white;
  z-index: 10;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  width: 25rem;
  height: 4rem;
  padding: 0.9rem 1rem 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: -0.015rem;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 0.1rem solid rgba(143, 145, 151, 0.37);
  border-radius: 0.5rem;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  position: relative;
  background-image: url("/build/assets/icon--chervon-down-e7693572.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  background-size: 1.2rem 1.4rem;
  background-color: #fff;
}

.select.big-input {
  width: 100%;
  height: 5rem;
  padding: 1.6rem 4rem 1.4rem 1.5rem;
}

.select.search-input {
  background-image: url("/build/assets/mag-glass-928bb133.svg");
  background-repeat: no-repeat;
  background-size: 1.4rem;
  background-color: white;
  background-position: calc(100% - 1.5rem) center;
}

.select::-webkit-search-cancel-button {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.3rem;
  margin: auto;
  height: 1.6rem;
  width: 1.6rem;
  background-image: url("/build/assets/icon--close-eb0d346b.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  background-color: white;
  z-index: 10;
}

.select select, .select::after {
  grid-area: select;
}

.select + label {
  margin-top: 2rem;
}

.select:not(.select--multiple)::after {
  content: "";
  justify-self: end;
  width: 0.8em;
  height: 0.5em;
  background-color: #8F9197;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}

select[multiple] {
  padding-right: 0;
  /*
   * Safari will not reveal an option
   * unless the select height has room to
   * show all of it
   * Firefox and Chrome allow showing
   * a partial option
   */
  height: 6rem;
  /*
   * Experimental - styling of selected options
   * in the multiselect
   * Not supported crossbrowser
   */
}

select[multiple] option {
  white-space: normal;
  outline-color: var(--select-focus);
}

.select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}

label {
  font-size: 1.125rem;
  font-weight: 500;
  white-space: normal;
}

.checkbox {
  display: flex;
  align-items: center;
}

.checkbox .checkbox__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 3rem;
  position: relative;
  cursor: pointer;
}

.checkbox .checkbox__label .title {
  color: #2C2D2F;
  font-weight: bold;
}

.checkbox .checkbox__label:before {
  content: "";
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  border: 0.1rem solid #e2e4e3;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  background-color: #0BE96B;
  box-shadow: inset 0 0 0 20px white;
}

.checkbox .checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.checkbox .checkbox__input:checked + .checkbox__label:before {
  box-shadow: inset 0 0 0 3px white;
}

.file-input {
  position: relative;
  display: flex;
  column-gap: 2rem;
  align-items: center;
}

.file-input input[type=file] {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}

.file-input:before {
  content: "Upload an Image";
  display: inline-block;
  border-radius: 2rem;
  outline: none;
  letter-spacing: -0.25px;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  cursor: pointer;
  padding: 1.1rem 2rem 1rem;
  background-color: transparent;
  color: #2C2D2F;
  border: 0.2rem solid #2C2D2F;
  text-decoration: none;
  font-weight: bold;
}

.file-input:after {
  content: attr(data-file-name);
  color: #4685FF;
  text-decoration: underline;
}

form .field {
  margin-bottom: 2rem;
}

form .field label {
  color: #8F9197;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

form .field label .popover-trigger {
  margin-left: 1rem;
  top: 0.2rem;
  position: relative;
}

form .field label .popover-trigger svg {
  height: 1.9rem;
  width: 1.9rem;
}

form .field label:not(.checkbox__label) {
  display: flex;
}

form .field input[type=text],
form .field input[type=password],
form .field input[type=email],
form .field input[type=tel],
form .field input[type=date],
form .field input[type=search],
form .field textarea {
  font-family: "Euclid", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  width: 25rem;
  height: 4rem;
  padding: 0.9rem 1rem 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: -0.015rem;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 0.1rem solid rgba(143, 145, 151, 0.37);
  border-radius: 0.5rem;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  position: relative;
}

form .field input[type=text].big-input,
form .field input[type=password].big-input,
form .field input[type=email].big-input,
form .field input[type=tel].big-input,
form .field input[type=date].big-input,
form .field input[type=search].big-input,
form .field textarea.big-input {
  width: 100%;
  height: 5rem;
  padding: 1.6rem 4rem 1.4rem 1.5rem;
}

form .field input[type=text].search-input,
form .field input[type=password].search-input,
form .field input[type=email].search-input,
form .field input[type=tel].search-input,
form .field input[type=date].search-input,
form .field input[type=search].search-input,
form .field textarea.search-input {
  background-image: url("/build/assets/mag-glass-928bb133.svg");
  background-repeat: no-repeat;
  background-size: 1.4rem;
  background-color: white;
  background-position: calc(100% - 1.5rem) center;
}

form .field input[type=text]::-webkit-search-cancel-button,
form .field input[type=password]::-webkit-search-cancel-button,
form .field input[type=email]::-webkit-search-cancel-button,
form .field input[type=tel]::-webkit-search-cancel-button,
form .field input[type=date]::-webkit-search-cancel-button,
form .field input[type=search]::-webkit-search-cancel-button,
form .field textarea::-webkit-search-cancel-button {
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.3rem;
  margin: auto;
  height: 1.6rem;
  width: 1.6rem;
  background-image: url("/build/assets/icon--close-eb0d346b.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  background-color: white;
  z-index: 10;
}

form .field textarea {
  height: 10rem;
  padding: 1rem;
}

form .field .otp-container input {
  width: 4rem !important;
  height: 4rem !important;
  padding: 0;
  margin-right: 1rem;
}

form .field .control-error {
  color: #ea245d;
  width: 100%;
  text-align: left;
  margin: 0.5rem;
}

form .field.field-error label {
  color: #ea245d;
}

form .field.field-error input[type=text],
form .field.field-error input[type=password],
form .field.field-error input[type=email],
form .field.field-error input[type=tel],
form .field.field-error input[type=date],
form .field.field-error input[type=search],
form .field.field-error textarea {
  border-color: #ea245d;
}

form.grid-form {
  max-width: 60rem;
}

form.grid-form .field {
  margin-bottom: 0;
}

form.grid-form .field input, form.grid-form .field select, form.grid-form .field textarea {
  width: 100%;
}

.icon {
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}

.icon-electricity {
  background-color: #FAFF2C;
}

.icon-electricity svg,
.icon-electricity img {
  width: 1.4rem;
}

.icon-water {
  background-color: #4685FF;
}

.icon-water svg,
.icon-water img {
  width: 1.8rem;
}

.icon-broadband {
  background-color: #C855E1;
}

.icon-broadband svg,
.icon-broadband img {
  width: 2.6rem;
}

.icon-gas {
  background-color: #DD672E;
}

.icon-gas svg,
.icon-gas img {
  width: 1.6rem;
}

.icon-tvl {
  background-color: #8F47FF;
}

.icon-tvl svg,
.icon-tvl img {
  width: 3rem;
}

.icon-large {
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  line-height: 4rem;
}

.icon-medium {
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 4rem;
}

.icon-medium svg,
.icon-medium img {
  width: 1.2rem;
}

.icon-small {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  line-height: 4rem;
}

.icon-small svg,
.icon-small img {
  width: 0.8rem;
}

.icon-small.icon-tvl svg,
.icon-small.icon-tvl img {
  width: 1rem;
}

.top-5 h3 {
  margin: 0 0 1.5rem;
}

.grid--single-payment .stat,
.payments-stats .stat {
  height: auto;
}

.grid--single-payment .card-payment, .grid--single-payment .card-barchart,
.payments-stats .card-payment,
.payments-stats .card-barchart {
  min-height: 23rem;
}

.grid--single-payment [class^=col-],
.payments-stats [class^=col-] {
  container-type: inline-size;
  z-index: 1;
}

.delete-user .col-7 {
  margin: 2rem 0;
}

.meter-grid .label {
  font-size: 1rem;
  color: #8F9197;
}

/**************************\
  Basic Modal Styles
\**************************/

.modal {
  display: none;
}

.modal.is-open {
  display: block;
  position: absolute;
}

.modal {
  width: 42rem;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  min-width: 42rem;
  border-radius: 4px;
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.2rem;
  line-height: 1;
  align-items: center;
}

.modal__title .icon {
  margin-right: 1rem;
}

.modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

.modal__close svg {
  pointer-events: none;
  height: 1.5rem;
  width: 1.5rem;
}

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}

.modal__content hr {
  margin: 2rem 0;
}

.modal__content form .field input[type=text],
.modal__content form .field input[type=password],
.modal__content form .field input[type=email],
.modal__content form .field input[type=tel],
.modal__content form .field input[type=date],
.modal__content form .field input[type=search],
.modal__content form .field textarea {
  width: 100%;
}

.modal__location {
  display: block;
  width: 100%;
  margin: 0 auto 2rem;
}

.modal__btn {
  font-size: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 0.25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

/**************************\
  Demo Animation Style
\**************************/

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.modal .alert {
  font-size: 1.4rem;
}

#page-content {
  padding-left: 20rem;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #FAF9F7;
}

#page-content > .container {
  flex-grow: 1;
}

@media screen and (max-width: 991px) {
  #page-content {
    padding-left: 4.5rem;
  }
}

@media screen and (max-width: 991px) {
  .open + #page-content {
    padding-left: 0;
    transform: translateX(20rem);
  }
}

#page-content #sub-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 4rem;
  max-height: 4rem;
  border-bottom: 1px solid #e2e4e3;
  background-color: white;
  padding: 0 2rem;
}

#page-content #sub-nav .breadcrumbs {
  overflow: hidden;
  flex-grow: 1;
  position: relative;
}

#page-content #sub-nav .breadcrumbs:after {
  content: "";
  height: 100%;
  width: 4rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 23%, rgb(255, 255, 255) 55%);
  position: absolute;
  right: 0;
  top: 0;
}

#page-content #sub-nav .account-links {
  margin-left: auto;
  margin-right: 0;
  flex: 0 0 28rem;
  text-align: right;
}

#page-content #sub-nav a {
  margin-right: 1rem;
}