/*------------VARIABLES--------------*/
/* Colors: */
/* Colors for sidebar */
/* Widths: */
/*---------------------------*/
/*@import "../../atk4/css/semantic/common.scss"; */
/* ---------------- DEV NOTES ------------*/
/*
 ui.container max width on large screen: 1536px
 modify top header width when on large screen.

*/
.text .min {
  font-size: 0.9rem;
}

.color-primary {
  color: #FEB902;
}

.ui.button {
  margin-bottom: 5px;
}

/*
.flex-button-header {
    display: flex;
    justify-content: space-between;

    .part-right {
        margin-left:auto;
    }

    .part-left {
    }
}
*/
.mt-10 {
  margin-top: 10px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.layout {
  margin: auto;
  max-width: 2000px;
}

main {
  min-height: 100vh;
}

.top-relaxed {
  margin-top: 50px !important;
}

.floating-title-block {
  margin-top: 1em;
  margin-bottom: 1em;
}
.floating-title-block .ui.right.floated {
  float: right;
  margin-top: 0;
  margin-left: 0.5em;
}

.flex-title-block {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  /*& > *:last-child {*/
}
.flex-title-block .actions-block {
  margin-left: auto;
}
.flex-title-block .ui.header {
  margin-bottom: 0;
}
.flex-title-block .subheader {
  color: #808080;
}
@media only screen and (max-width: 790px) {
  .flex-title-block {
    display: block;
  }
  .flex-title-block .title-block {
    display: inline-block;
    width: 100%;
  }
  .flex-title-block .actions-block {
    margin-top: 1rem;
    display: inline-block;
    width: 100%;
  }
}

.spaced-row {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.ui.small.segment {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.load-block {
  position: relative;
}

.scroll-y {
  overflow-y: auto;
}

/* for segment dimmers we need to reduce z-index as sometimes when dimmer is
 * shown it is over header bar, but increasing z-index for header bar creates
 * issues with other elements like modal dimmers */
.ui.segment .ui.dimmer {
  z-index: 100;
}

/* Segment with no padding.
 * Use 
 * 'ui simple segment' - for segment with no padding but with border. 
 * 'ui simple basic segment' - for no padding and not boder. 
 */
.ui.simple.segment {
  padding: 0;
}

.ui.modal.modal-confirm-delete > .actions,
.ui.modal.modal-confirm-delete > .content {
  text-align: center;
}

.aux-action-pop-menu .ui.secondary.vertical.menu .item {
  padding: 0;
}

.page-container {
  padding-bottom: 60px;
}

/* TinyMCE menu goes over some opened unrelated popups (e.g. user menu or
 * language selector). This was best solution that works.
 */
.tiny-mce-field .tox .tox-editor-header {
  z-index: 0;
}

.ui.popup.responsive-popup {
  /*width:100%;*/
  max-width: 300px;
  white-space: normal;
}

.va-middle {
  vertical-align: middle;
}

.pointer {
  cursor: pointer;
}

.ui.buttons > .ui.dropdown:last-child > .menu.left {
  left: 0 !important;
  right: auto !important;
}

/* helper for aligning stuff */
.aligner {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 24em;
  justify-content: center;
}
.aligner .aligner-item {
  flex: 1;
}
.aligner .aligner-item.aligner-item--top {
  align-self: flex-start;
}
.aligner .aligner-item.aligner-item--bottom {
  align-self: flex-end;
}
.aligner .aligner-item.aligner-item--fixed {
  flex: none;
  max-width: 50%;
}

/*various layouts*/
.layout-default > main > .ui.container {
  padding-top: 49px;
}

.layout-app {
  /*kept for reference: */
}
.layout-app > main {
  padding-left: 230px;
}
.layout-app > main > .ui.container {
  padding-top: 49px;
}
@media only screen and (max-width: 767.98px) {
  .layout-app > main > .ui.container {
    padding-left: 1.3em !important;
    padding-right: 1.3em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .layout-app > main > .ui.container {
    padding-left: 1.3em !important;
    padding-right: 1.3em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .layout-app > main > .ui.container {
    padding-left: 1.3em !important;
    padding-right: 1.3em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 1200px) {
  .layout-app > main > .ui.container {
    padding-left: 1.3em !important;
    padding-right: 1.3em !important;
  }
}
@media only screen and (max-width: 767.98px) {
  .layout-app > main > .ui.container.full-100 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .layout-app > main > .ui.container.full-100 {
    padding-left: 0em !important;
    padding-right: 0em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .layout-app > main > .ui.container.full-100 {
    padding-left: 0em !important;
    padding-right: 0em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 1200px) {
  .layout-app > main > .ui.container.full-100 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
.layout-app .main-header-old .main-top-menu.ui.menu {
  /*If fixed menu, then we need to align it with sidebar*/
}
.layout-app .main-header-old .main-top-menu.ui.menu.fixed {
  left: 230px;
  /*left: $sidebarWidth + 1px; */
  /*width: calc(100% - 231px);*/
  width: calc(100% - 230px);
  max-width: calc(1800px - 230px);
}

.layout-clean {
  margin: auto;
  max-width: 1800px;
}
.layout-clean > main {
  height: 100%;
}
.layout-clean > main .container {
  height: 100%;
  /* The following is kept just in case we need to somilar elements
   * in Clean Layout, but the login page will be moved to Default
   * Layout. */
  /*
  .page-login {
      padding: 30px 30px;
      &.aligner {
          @media only screen and (max-width: 767px) {
              display:block;
              height:auto;
          }
      }

      .login-block {
          text-align:center;
          max-width: 800px;
          margin:auto;
          &.segment {
              padding:0;
          }

          .row {
              display: flex;
              align-items: stretch;
              justify-content: center;

              @media only screen and (max-width: 767px) {
                  display:inline-block;
                  width:100%;
              }
          }

          .column {
              padding: 50px 20px;
              flex-direction: column;
              flex: 50%;
              @media only screen and (max-width: 767px) {
                  display:inline-block;
                  width: 100%;
              }
          }

          .register-col {
              background-color:$colorSecondaryBackground;
              color: #fff;
              border-top-right-radius: 3px;
              border-bottom-right-radius: 3px;

              .ui.header {
                  color: #fff;
              }
          }
          .login-col {
          }
      }

  }
  */
}

.main-header {
  /*display: flex;*/
}
.main-header .part {
  flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /*border: 1px dashed red;*/
}
.main-header .part.part-right > .ui.menu > .item {
  text-align: right;
  margin-left: auto !important;
}
.main-header .part.part-right .large-screen-only {
  display: block;
}
@media only screen and (max-width: 1024px) {
  .main-header .part.part-right .large-screen-only {
    display: none;
  }
}
.main-header .main-top-menu.ui.menu {
  border-left: 1px solid #f3f3f3;
  border-top: none;
  border-right: none;
  border-radius: 0;
  max-width: 2000px;
  margin: auto;
  right: 0;
}
.main-header .main-top-menu.ui.menu > .part > .item {
  height: 100%;
}
.main-header .main-top-menu.ui.menu .account-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
@media only screen and (max-width: 790px) {
  .main-header .main-top-menu.ui.menu .account-name {
    max-width: 200px;
  }
}
@media only screen and (max-width: 640px) {
  .main-header .main-top-menu.ui.menu .account-name {
    max-width: 110px;
  }
}
.main-header #user-pop-menu .company-block {
  margin-top: 4px;
  color: #a5a5a5;
}
.main-header .entity-list .close-item .header {
  color: "red";
}
.main-header .entity-list .close-item .header > .icon {
  vertical-align: unset;
}

#sidebar {
  position: relative;
}
#sidebar .sidebar-wrapper {
  width: 230px;
  position: fixed;
  height: 100%;
  background: #F9FAFB;
  top: 0;
  color: #333;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 105;
  padding: 2px 2px 2px 10px;
  /*
  .logo-small {
      display:none;
  }
  @media only screen and (max-width: 1024px) {
      .logo-small {
          max-width:100%;
          max-height:48px;
          display:block;
      }
      .logo {
          display:none;
      }
      .sidebar-item {
          padding:0px 3px;
      }
  }
  */
}
#sidebar .sidebar-wrapper > .menu {
  padding-bottom: 50px;
}
#sidebar .sidebar-wrapper > .menu > .item.active .icon, #sidebar .sidebar-wrapper > .menu > .item:hover:not(.sidebar-toggle-item) .icon {
  color: #FEB902;
}
#sidebar .sidebar-wrapper .sidebar-item {
  padding: 11px 13px;
}
#sidebar .sidebar-wrapper .sidebar-item.logo-item {
  margin: auto;
  text-align: center;
}
#sidebar .sidebar-wrapper .logo {
  width: 90%;
  margin: auto;
}
#sidebar .sidebar-wrapper .small-screen-only {
  display: none;
}
@media only screen and (max-width: 1024px) {
  #sidebar .sidebar-wrapper .small-screen-only {
    display: block;
  }
}

/* testing stuff */
.main-header .main-top-menu.ui.menu {
  z-index: 100;
}

/**/
body.sidebar-transitions-on main {
  transition: padding 0.3s ease;
}
body.sidebar-transitions-on .sidebar-wrapper {
  transition: width 0.3s ease;
}
body.sidebar-transitions-on .main-header .main-top-menu.ui.menu {
  transition: padding 0.3s ease;
}

body.sidebar-closed main {
  /*padding-left: 105px;*/
  padding-left: 60px;
}
body.sidebar-closed #sidebar .sidebar-wrapper {
  padding: 2px;
  /*width:110px;*/
  width: 60px;
  /*
  .ui.vertical.menu .item>i.icon {
      font-size: 1.2em;
      float:none;
      width:100%;
      margin:0;
  }
  */
}
body.sidebar-closed #sidebar .sidebar-wrapper > .menu {
  text-align: center;
  display: inline-block;
  margin: 14px auto auto auto;
}
body.sidebar-closed #sidebar .sidebar-wrapper .ui.vertical.menu .item > i.icon {
  float: none;
  width: 100%;
  margin: 0;
}
body.sidebar-closed #sidebar .sidebar-wrapper .item > span.title {
  display: none;
}
body.sidebar-closed #sidebar .sidebar-wrapper .sidebar-item.logo-item {
  padding: 2px 6px;
}
body.sidebar-closed #sidebar .sidebar-wrapper .sidebar-item.logo-item .logo {
  display: none;
}
body.sidebar-closed #sidebar .sidebar-wrapper .sidebar-item.logo-item .logo-small {
  width: 100%;
  height: 28px;
  background-size: cover;
  background-image: url("/images/design/logos/v4_sm.png");
}
body.sidebar-closed .main-header .main-top-menu.ui.menu.fixed {
  padding-left: 60px;
  /*
  left: $sidebarWidthClosed;
  width: calc(100% - 60px);
  max-width: calc(1800px - 60px);
  */
}

body.sidebar-open .main-header .main-top-menu.ui.menu.fixed {
  padding-left: 230px;
}
body.sidebar-open #sidebar .sidebar-toggle-item {
  text-align: right;
}
body.sidebar-open #sidebar .sidebar-toggle-item .icon {
  float: none;
}
body.sidebar-open.sidebar-mode-overlay main {
  padding-left: 60px;
}
body.sidebar-open.sidebar-mode-overlay #sidebar {
  position: absolute;
}
body.sidebar-open.sidebar-mode-overlay #sidebar .sidebar-wrapper {
  width: 230px;
  box-shadow: rgba(149, 157, 165, 0.25) 0px 8px 24px;
}

/* end testing stuff */
/*@use "../atk4/css/semantic/grid.scss"; */
/* common views */
.basic-data-block {
  display: flex;
}
.basic-data-block .image-column,
.basic-data-block .left-column {
  margin-right: 3rem;
}
.basic-data-block .image-column.status-column,
.basic-data-block .left-column.status-column {
  min-width: 120px;
}
.basic-data-block .image-column.status-column .status-label,
.basic-data-block .left-column.status-column .status-label {
  width: 100%;
  display: block;
}
.basic-data-block .data-column {
  flex-basis: 0;
  flex-grow: 1;
}

/* meter reading, meter icons, meter schema */
i.fas.circle-1,
i.fab.circle-1 {
  display: inline-block;
  border-radius: 100%;
  box-shadow: 0px 0px 1px #bababa;
  padding: 0.5em 0.65em;
}

i.fas.circle-2,
i.fab.circle-2 {
  display: inline-block;
  border-radius: 100%;
  box-shadow: 0px 0px 1px #bababa;
  padding: 0.5em 0.65em;
}

.ui.dropdown i.fas.circle-2,
.ui.dropdown i.fab.circle-2 {
  margin-right: 0.78571429rem;
  font-size: 0.78571429rem;
}

i.fas.circle-3,
i.fab.circle-3 {
  display: inline-block;
  border-radius: 100%;
  box-shadow: 0px 0px 1px #bababa;
  padding: 0.5em 0.65em;
  background-color: #6cb5d9;
  color: #fff;
}

i.fas.i-water-cold {
  border: 1px solid #6cb5d9;
  color: #6cb5d9;
}

i.fas.i-water-hot {
  border: 1px solid #E5222F;
  color: #E5222F;
}

i.fas.i-electricity {
  border: 1px solid #FECD2F;
  color: #FECD2F;
  padding: 0.5em 0.75em;
}

i.fab.i-gas {
  border: 1px solid #FC5F20;
  color: #FC5F20;
  padding: 0.52em 0.65em;
}

i.fas.i-unknown {
  border: 1px solid #bababa;
  color: #bababa;
}

.meter-reading-form .meter-row {
  width: 100%;
  border: 1px solid #b6c5cd;
  border-radius: 3px;
  padding: 20px 7px;
  margin: 20px 0;
}

.meter-reading-form h4 {
  margin: 0;
}

.meter-reading-form h5 {
  margin: 0.5rem 0 0 0;
}

.meter-reading-form .flex-col {
  padding: 0px 30px;
}

.meter-reading-form .flex-col:first-child {
  border-right: 1px solid #b6c5cd;
  width: 33%;
}

.meter-reading-form .flex-col:nth-child(2) {
  max-width: 30%;
}

.meter-reading-form .flex-col.center {
  text-align: center;
}

.meter-reading-form .flex-col:first-child > .block-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.meter-reading-form .flex-col:last-child {
  width: 33%;
  border-left: 1px solid #b6c5cd;
  text-align: right;
}

.meter-reading-form .meter-input-container {
  width: 100%;
  margin: auto;
}

.meter-reading-form .further {
  margin-top: 12px;
}

.meter-schema-wrapper {
  position: relative;
}

.meter-schema-wrapper .toolset {
  top: 0;
  right: 0;
  position: absolute;
  height: 100%;
  background-color: "red";
  z-index: 5;
}

.meter-schema-wrapper .tool {
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 100%;
  width: 40px;
  height: 40px;
  font-size: 1.33rem;
  text-align: center;
  line-height: 40px;
  margin-bottom: 5px;
  margin-right: 5px;
  color: #6cb5d9;
  background-color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.meter-schema-wrapper .tool:hover {
  color: #fff;
  background-color: #6cb5d9;
}

.meter-schema-wrapper .tool.disabled {
  opacity: 0.4 !important;
  pointer-events: none;
}

/* lists */
.list-accounts-select {
  margin-top: 10px !important;
}
.list-accounts-select.ui.horizontal.cards > .card {
  min-height: 100px;
  min-width: 200px;
  width: 450px;
}
.list-accounts-select.ui.horizontal.cards > .card .edit {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 3px;
  color: rgba(0, 0, 0, 0.4);
  transition: color 0.3s ease;
}
.list-accounts-select.ui.horizontal.cards > .card .edit:hover {
  color: rgb(0, 0, 0);
}
.list-accounts-select.ui.horizontal.cards > .card .image .bgimg {
  background-position: center;
  background-size: cover;
  height: 100%;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.list-accounts-select.ui.horizontal.cards > .card .image .img-placeholder {
  width: 65%;
  margin: auto;
}
.list-accounts-select.ui.horizontal.cards > .card .image .img-placeholder .icon {
  font-size: 3.5rem;
}
@media (max-width: 767.98px) {
  .list-accounts-select.ui.horizontal.cards > .card .image {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .list-accounts-select.ui.horizontal.cards > .card > .content {
    display: block;
  }
}

.recent-activitiy-list .buttons.fluid {
  justify-content: flex-end;
}
.recent-activitiy-list .buttons .dismiss.button {
  max-width: 35px;
}

.file-list * {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
.file-list .thumbnails {
  display: flex;
  flex-wrap: wrap;
  flex-flow: row wrap;
  gap: 2px;
  justify-content: flex-start;
}
.file-list .thumbnails a {
  /*flex-grow: 1;*/
  margin-right: auto;
  height: 125px;
  margin: 2px;
  border-radius: 2px;
  overflow: hidden;
}
@media (max-width: 550px) {
  .file-list .thumbnails a {
    /*    width: 100%;
        height: auto;*/
    flex-grow: 1;
  }
}
.file-list .thumbnails img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.3s;
}
.file-list .thumbnails .sim-thumb {
  height: 100%;
  width: 125px;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s;
}
@media (max-width: 550px) {
  .file-list .thumbnails .sim-thumb {
    width: 100%;
  }
}
.file-list .thumbnails .sim-thumb .thumb-content {
  width: 100%;
  font-size: 3rem;
  color: #7f7f7f;
  padding: 7px;
}
.file-list .thumbnails .sim-thumb .thumb-content .label {
  overflow: hidden;
  margin-top: 4px;
  display: block;
  width: 100%;
  font-size: 0.85rem;
  line-height: normal;
  word-wrap: break-word;
}
.file-list .thumbnails a:hover > img {
  transform: scale(1.1);
}
.file-list .thumbnails a:hover > .sim-thumb {
  background-color: rgba(0, 0, 0, 0.07);
}

.tenant-grid {
  /*
  .scroller.scrollable-x {
      // Use CSS containment to isolate the scrolling behavior
      contain: layout style;

      // Allow search results to escape
      .editable-cell .ui.search > .results {
          position: absolute !important;
          z-index: 9999;
          // Use transform to escape the containing block
          transform: translateZ(0);
      }
  }
  */
}
.tenant-grid .editable-cell {
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.tenant-grid .editable-cell:hover {
  background-color: #f8f9fa;
}
.tenant-grid .editable-cell.loading {
  opacity: 0.6;
}
.tenant-grid .editable-cell .edit-icon {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  cursor: pointer;
  z-index: 10;
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-table;
}
.tenant-grid .editable-cell .edit-icon:hover {
  color: #4183c4;
}
.tenant-grid .editable-cell .cell-content {
  margin-right: 10px;
  padding-right: 10px;
}
.tenant-grid .editable-cell .ui.input {
  display: inline-flex;
  align-items: center;
  width: calc(100% - 60px);
  min-width: 150px;
  margin-right: 5px;
}
.tenant-grid .editable-cell .save-icon,
.tenant-grid .editable-cell .cancel-icon {
  display: inline-block;
  margin-left: 5px;
  flex-shrink: 0;
}
.tenant-grid .editable-cell input {
  width: 100%;
  /*border: 1px solid #007bff;*/
  /*border-radius: 3px;*/
  /*padding: 2px 5px;*/
}
.tenant-grid .editable-cell .ui.search {
  width: calc(100% - 60px);
  margin-right: 5px;
  display: inline-block;
}
.tenant-grid .editable-cell .ui.search .input {
  width: 100%;
}
.tenant-grid .editable-cell .ui.search input {
  /*border: 1px solid #007bff;*/
  border-radius: 3px;
}
.tenant-grid .scroller.scrollable-x {
  overflow-y: visible;
}
.tenant-grid .editable-cell .ui.search {
  position: relative;
}
.tenant-grid .editable-cell .ui.search > .results {
  position: fixed !important;
  z-index: 9999;
  transform: none;
  max-height: 300px;
  overflow-y: auto;
}

.tenant-incoming-invoice-grid td.nowrap,
.tenant-incoming-invoice-grid th.nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* PageNav & breadcrumbs */
.page-nav {
  margin-top: 15px;
  margin-bottom: 10px;
  min-height: 36px;
}

.breadcrumb-wrapper {
  margin-top: 15px;
  margin-bottom: 10px;
}

/*In some cases we need to have a larger padding from the top. But we can't use
 * the padding for "container" as it will always set the padding. It's not also
 * nice to use some specific class e.g. mt-40 as the number can change. So
 * easier is to create an element as the placeholder. In case if the back
 * button is used, no need to have top-spacer. If no back button - create
 * top-spacer. */
.top-spacer {
  height: 62px;
}

/* forms */
.form-person input.type-switch {
  display: none;
}

.invoice-items-block .totals {
  margin: 15px 0 30px 0;
}
.invoice-items-block .totals .totals-row {
  padding: 4px;
}
@media screen and (max-width: 700px) {
  .invoice-items-block .totals .totals-row .hide-on-mobile {
    display: none;
  }
}
.invoice-items-block .item-row {
  padding-top: 20px;
}
.invoice-items-block .item-row .ui.grid > .row.pt0 {
  padding-top: 0;
}
.invoice-items-block .item-row .item-subtotal {
  margin-top: 14px;
}
.invoice-items-block .item-row .open-metadata {
  margin-top: 5px;
}

.entry-metadata-modal #meta-table .th-actions {
  width: 65px;
}

.calculate-block-wrapper .calc-step-field .label.step-number {
  /*margin-top:25px;*/
  margin-top: 5px;
}
.calculate-block-wrapper .calc-step-field .btn-delete-step {
  margin-top: 25px;
}
.calculate-block-wrapper .add-calc-step {
  margin-top: 4px;
}

.form-account-create .card.select-plan .fix-h {
  min-height: 40px;
}
@media only screen and (max-width: 640px) {
  .form-account-create .ui.two.cards.plan-cards > .card {
    width: 100%;
  }
}

.template-editor {
  position: relative;
  border: 1px solid #d4d4d5;
  border-radius: 0.28571429rem;
}
.template-editor textarea {
  border: none;
  resize: vertical;
  min-height: 400px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  line-height: 1.4;
  padding: 1rem;
  background-color: #f8f9fa;
}
.template-editor textarea:focus {
  outline: none;
  background-color: #ffffff;
}

.template-preview {
  min-height: 400px;
  background-color: #ffffff;
}
.template-preview .ui.placeholder {
  background-color: #f8f9fa;
}

.code-example {
  margin-top: 0.5rem;
}
.code-example code {
  display: block;
  background-color: #f1f3f4;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 12px;
  color: #333;
  border-left: 3px solid #2185d0;
}

.template-variables .ui.list .item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.template-variables .ui.list .item:last-child {
  border-bottom: none;
}
.template-variables .ui.list .item .header {
  font-weight: 600;
  color: #2185d0;
  margin-bottom: 0.25rem;
}
.template-variables .ui.list .item .description {
  color: #666;
  font-size: 0.9em;
}

.template-form .ui.segment {
  margin-bottom: 2rem;
}
.template-form .ui.segment h3.ui.header {
  margin-bottom: 1rem;
  color: #333;
}
.template-form .form-bottom-buttons {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.ace-editor .ace_editor {
  min-height: 400px;
  border-radius: 0.28571429rem;
}

.wysiwyg-editor .wysiwyg-toolbar {
  background-color: #f8f9fa;
  border-bottom: 1px solid #d4d4d5;
  padding: 0.5rem;
  border-radius: 0.28571429rem 0.28571429rem 0 0;
}
.wysiwyg-editor .wysiwyg-toolbar .ui.button {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}
.wysiwyg-editor .wysiwyg-toolbar .ui.button.active {
  background-color: #2185d0;
  color: #ffffff;
}
.wysiwyg-editor .wysiwyg-content {
  border: 1px solid #d4d4d5;
  border-top: none;
  border-radius: 0 0 0.28571429rem 0.28571429rem;
  min-height: 400px;
  padding: 1rem;
  background-color: #ffffff;
}
.wysiwyg-editor .wysiwyg-content:focus {
  outline: none;
  border-color: #2185d0;
}

.template-preview .invoice-preview {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}
.template-preview .invoice-preview .preview-header {
  background-color: #f8f9fa;
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
}
.template-preview .invoice-preview .preview-header h4 {
  margin: 0;
  color: #333;
}
.template-preview .invoice-preview .preview-content {
  padding: 2rem;
}
.template-preview .invoice-preview .preview-content .preview-placeholder {
  text-align: center;
  color: #999;
  padding: 2rem;
}
.template-preview .invoice-preview .preview-content .preview-placeholder .ui.icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .template-editor textarea {
    min-height: 300px;
    font-size: 13px;
  }
  .template-preview {
    min-height: 300px;
  }
  .ui.four.column.stackable.grid .column {
    margin-bottom: 1rem;
  }
}
@media (prefers-color-scheme: dark) {
  .template-editor textarea {
    background-color: #2d3748;
    color: #e2e8f0;
  }
  .template-editor textarea:focus {
    background-color: #1a202c;
  }
  .template-preview {
    background-color: #2d3748;
    color: #e2e8f0;
  }
  .code-example code {
    background-color: #4a5568;
    color: #e2e8f0;
  }
}
/* invoice templates */
.invoice_wrapper {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  max-width: 794px; /* A4 width */
  margin: 0 auto;
  padding: 2rem;
}

body.invoice_pdf main {
  background-image: none !important;
}
body.invoice_pdf .invoice_wrapper {
  /*max-width: 100%;*/
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
  /*padding:20px 20px 20px 30px;*/
}

.invoice-template {
  margin: 0 auto 4rem auto;
  width: 100%;
  padding: 1rem;
}
.invoice-template .text-right {
  text-align: right;
}
.invoice-template .text-left {
  text-align: left;
}
.invoice-template .text-center {
  text-align: center;
}
.invoice-template .text-nowrap {
  white-space: nowrap;
}
.invoice-template .total-in-words .total-in-words-value {
  font-weight: 600;
}
.invoice-template .mt-\[-15px\] {
  margin-top: -15px !important;
}
.invoice-template *[class*="single line"] {
  white-space: nowrap;
}

.invoice-template-colorful {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
  background: #ffffff;
  color: #2d3748;
  min-height: 100vh;
  padding: 1rem;
  /* Container Queries for responsive layout based on container width */
  /*
  @media print {
      .invoice-template-colorful {
          background: #ffffff !important;
          color: #000000 !important;
      }

      .invoice-container {
          box-shadow: none !important;
      }
      .invoice-header {
          background: #f8f9fa !important;
          color: #000000 !important;
      }
  }*/
}
.invoice-template-colorful .invoice-container {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  /*max-width: 800px;*/
  margin: 0 auto;
  container-type: inline-size;
}
.invoice-template-colorful .invoice-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 2rem;
  text-align: center;
}
.invoice-template-colorful .logo {
  max-height: 80px;
  margin-bottom: 1rem;
}
.invoice-template-colorful .company-name {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.invoice-template-colorful .company-tagline {
  font-size: 1rem;
  opacity: 0.9;
  font-weight: 300;
}
.invoice-template-colorful .invoice-body {
  padding: 2rem;
}
.invoice-template-colorful .invoice-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 0.75rem;
  color: #ffffff;
}
.invoice-template-colorful .invoice-number {
  font-size: 1.5rem;
  font-weight: 700;
}
.invoice-template-colorful .invoice-dates {
  text-align: right;
}
.invoice-template-colorful .date-item {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.9;
}
.invoice-template-colorful .invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.invoice-template-colorful .party-section {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
.invoice-template-colorful .party-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-template-colorful .party-details {
  color: #4a5568;
  font-size: 0.875rem;
  line-height: 1.6;
}
.invoice-template-colorful .party-details p {
  margin: 0.25rem 0;
}
.invoice-template-colorful .invoice-items {
  margin-bottom: 2rem;
}
.invoice-template-colorful .total-in-words,
.invoice-template-colorful .invoice-late-fees {
  margin-top: 1rem;
}
.invoice-template-colorful .items-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.invoice-template-colorful .items-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-template-colorful .items-table td {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  color: #2d3748;
}
.invoice-template-colorful .item-description {
  font-weight: 500;
}
.invoice-template-colorful .item-quantity,
.invoice-template-colorful .item-price,
.invoice-template-colorful .item-total {
  /*font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;*/
  font-weight: 600;
}
.invoice-template-colorful .items-table tr:nth-child(even) {
  background-color: #f7fafc;
}
.invoice-template-colorful .invoice-totals {
  margin-left: auto;
  width: 300px;
}
.invoice-template-colorful .total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  font-size: 0.875rem;
}
.invoice-template-colorful .total-row.subtotal {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.invoice-template-colorful .total-row.tax {
  color: #718096;
  font-size: 0.8rem;
}
.invoice-template-colorful .total-row.total {
  font-weight: 700;
  font-size: 1.25rem;
  color: #2d3748;
  border-top: 3px solid #667eea;
  padding-top: 1rem;
  margin-top: 1rem;
}
.invoice-template-colorful .invoice-remarks {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 0.75rem;
}
.invoice-template-colorful .invoice-remarks h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}
.invoice-template-colorful .invoice-footer {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 2rem;
  text-align: center;
}
.invoice-template-colorful .footer-content {
  opacity: 0.9;
  font-size: 0.875rem;
}
.invoice-template-colorful .footer-content p {
  margin: 0.5rem 0;
}
@container (min-width: 500px) {
  .invoice-template-colorful .invoice-parties {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .invoice-template-colorful .invoice-meta {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }
  .invoice-template-colorful .invoice-dates {
    margin-top: 0 !important;
    text-align: right !important;
  }
  .invoice-template-colorful .invoice-totals {
    width: 300px !important;
  }
  .invoice-template-colorful .items-table {
    font-size: 0.875rem !important;
  }
  .invoice-template-colorful .items-table th,
  .invoice-template-colorful .items-table td {
    padding: 1rem !important;
  }
  .invoice-template-colorful .items-table.compact-table td, .invoice-template-colorful .items-table.compact-table th {
    font-size: 10px;
    padding: 0.3rem 0.45rem !important;
  }
}
@container (max-width: 499px) {
  .invoice-template-colorful .invoice-parties {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .invoice-template-colorful .invoice-meta {
    flex-direction: column !important;
    text-align: center !important;
  }
  .invoice-template-colorful .invoice-dates {
    margin-top: 1rem !important;
    text-align: center !important;
  }
  .invoice-template-colorful .invoice-totals {
    width: 100% !important;
  }
  .invoice-template-colorful .items-table {
    font-size: 0.8rem !important;
  }
  .invoice-template-colorful .items-table th,
  .invoice-template-colorful .items-table td {
    padding: 0.5rem !important;
  }
  .invoice-template-colorful .items-table.compact-table td, .invoice-template-colorful .items-table.compact-table th {
    font-size: 10px;
    padding: 0.3rem 0.45rem !important;
  }
}

.invoice-template-modern {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0 auto;
  padding: 1rem;
  background: #ffffff;
  container-type: inline-size;
  /*
  .date-item {
      margin-bottom: 0.25rem;
  }
  */
  /* Container Queries for responsive layout based on container width */
  /*
  @media print {
      .invoice-template-modern {
          padding: 0 !important;
          background: #ffffff !important;
          color: #000000 !important;

          .invoice-dates,
          .invoice-footer,
          .party-details,
          .items-table td {
              color: #2c2f35;
          }
      }
  }*/
}
.invoice-template-modern .invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}
.invoice-template-modern .logo-section {
  flex: 1;
}
.invoice-template-modern .logo {
  max-height: 60px;
  max-width: 200px;
  margin-bottom: 1rem;
}
.invoice-template-modern .company-info h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #111827;
}
.invoice-template-modern .company-info p {
  margin: 0.25rem 0;
  color: #6b7280;
  font-size: 0.875rem;
}
.invoice-template-modern .invoice-meta {
  text-align: right;
}
.invoice-template-modern .invoice-number {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}
.invoice-template-modern .invoice-dates {
  color: #6b7280;
  font-size: 0.875rem;
}
.invoice-template-modern .text-grey {
  color: #6b7280;
}
.invoice-template-modern .invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 0.5rem;
}
.invoice-template-modern h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  /*letter-spacing: 0.05em;*/
}
.invoice-template-modern .party-details {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
}
.invoice-template-modern .party-details p {
  margin: 0.25rem 0;
}
.invoice-template-modern .items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.invoice-template-modern .items-table th {
  background-color: #f9fafb;
  padding: 0.75rem;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  text-transform: uppercase;
  /*letter-spacing: 0.05em;*/
  border-bottom: 1px solid #e5e7eb;
}
.invoice-template-modern .items-table td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}
.invoice-template-modern .item-description {
  font-weight: 500;
}
.invoice-template-modern .invoice-totals {
  margin-left: auto;
  width: 300px;
}
.invoice-template-modern .total-row {
  display: flex;
  justify-content: space-between;
  padding: 0 0;
  font-size: 0.875rem;
}
.invoice-template-modern .total-row.subtotal {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
}
.invoice-template-modern .total-row.tax {
  color: #6b7280;
}
.invoice-template-modern .total-row.total {
  font-weight: 600;
  font-size: 1.125rem;
  color: #111827;
  border-top: 2px solid #e5e7eb;
  padding-top: 0.25rem;
  margin-top: 0.25rem;
}
.invoice-template-modern .invoice-late-fees,
.invoice-template-modern .total-in-words {
  margin-top: 1rem;
}
.invoice-template-modern .invoice-remarks {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
}
.invoice-template-modern .invoice-remarks h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}
.invoice-template-modern .invoice-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.875rem;
  text-align: center;
}
@container (min-width: 500px) {
  .invoice-template-modern .invoice-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .invoice-template-modern .invoice-meta {
    margin-top: 0 !important;
    text-align: right !important;
  }
  .invoice-template-modern .invoice-parties {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .invoice-template-modern .invoice-totals {
    width: 300px !important;
  }
  .invoice-template-modern .items-table {
    font-size: 0.875rem !important;
  }
  .invoice-template-modern .items-table th,
  .invoice-template-modern .items-table td {
    padding: 0.75rem !important;
  }
  .invoice-template-modern .items-table.compact-table td, .invoice-template-modern .items-table.compact-table th {
    font-size: 10px;
    padding: 0.25rem 0.35rem !important;
  }
}
@container (max-width: 499px) {
  .invoice-template-modern .invoice-header {
    flex-direction: column !important;
    text-align: center !important;
  }
  .invoice-template-modern .invoice-meta {
    margin-top: 1rem !important;
    text-align: center !important;
  }
  .invoice-template-modern .invoice-parties {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .invoice-template-modern .invoice-totals {
    width: 100% !important;
  }
  .invoice-template-modern .items-table {
    font-size: 0.8rem !important;
  }
  .invoice-template-modern .items-table th,
  .invoice-template-modern .items-table td {
    padding: 0.5rem !important;
  }
  .invoice-template-modern .items-table.compact-table td, .invoice-template-modern .items-table.compact-table th {
    font-size: 10px;
    padding: 0.25rem 0.35rem !important;
  }
}
.invoice-template-modern.pdf .invoice-dates,
.invoice-template-modern.pdf .invoice-footer,
.invoice-template-modern.pdf .party-details,
.invoice-template-modern.pdf .items-table td {
  color: #2c2f35;
}

.invoice-template-simple {
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/
  /*max-width: 800px;*/
  /* A4 width is 210mm = 595.28pt = 794px (minus 2pt more for your margins)
   * */
  background-color: #fff;
}
.invoice-template-simple .ui.grid > .row > .column > img.logo,
.invoice-template-simple .ui.grid > .row > img.logo {
  max-width: 100%;
  max-height: 110px;
}
.invoice-template-simple .ui.ui.ui.compact.grid > .row {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.invoice-template-simple .invoice-number {
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
  font-weight: bold;
}
.invoice-template-simple .totals {
  font-size: 1.2rem;
}
.invoice-template-simple .totals .grand-total-row {
  font-size: 1.4rem;
}
.invoice-template-simple .total-in-words {
  /*
  .total-in-words-label{

  }*/
}
.invoice-template-simple .total-in-words .total-in-words-value {
  font-weight: 600;
}
.invoice-template-simple.pdf {
  box-shadow: none;
  margin: 0 auto;
  padding: 20px 20px 20px 30px;
}

.invoice-template-jnp {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 0 auto;
  padding: 0.5rem;
  background: #ffffff;
  container-type: inline-size;
  font-size: 0.8rem;
  /* Container Queries for responsive layout */
}
.invoice-template-jnp .invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}
.invoice-template-jnp .logo-section {
  flex: 1;
}
.invoice-template-jnp .logo {
  max-height: 40px;
  max-width: 150px;
  margin-bottom: 0.5rem;
}
.invoice-template-jnp .company-info h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #111827;
}
.invoice-template-jnp .company-info p {
  margin: 0.125rem 0;
  color: #6b7280;
  font-size: 0.75rem;
}
.invoice-template-jnp .reg-number, .invoice-template-jnp .vat-number {
  font-weight: 500;
  color: #374151;
}
.invoice-template-jnp .address, .invoice-template-jnp .phone {
  color: #6b7280;
}
.invoice-template-jnp .invoice-meta {
  text-align: right;
  min-width: 200px;
}
.invoice-template-jnp .invoice-number {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}
.invoice-template-jnp .invoice-date {
  color: #6b7280;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.invoice-template-jnp .recipient-info {
  text-align: right;
  color: #374151;
}
.invoice-template-jnp .recipient-info p {
  margin: 0.125rem 0;
  font-size: 0.75rem;
}
.invoice-template-jnp .bank-details {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #f8fafc;
  border-radius: 0.375rem;
  border: 1px solid #e2e8f0;
}
.invoice-template-jnp .bank-details h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-template-jnp .bank-accounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5rem;
}
.invoice-template-jnp .bank-account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem;
  background-color: #ffffff;
  border-radius: 0.25rem;
  border: 1px solid #e2e8f0;
}
.invoice-template-jnp .bank-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.75rem;
}
.invoice-template-jnp .account-number {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
  color: #059669;
  font-weight: 600;
  font-size: 0.75rem;
}
.invoice-template-jnp .items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.7rem;
}
.invoice-template-jnp .items-table th {
  background-color: #f1f5f9;
  padding: 0.5rem 0.375rem;
  font-weight: 600;
  color: #374151;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}
.invoice-template-jnp .items-table th.text-left {
  text-align: left;
}
.invoice-template-jnp .items-table th.text-right {
  text-align: right;
}
.invoice-template-jnp .items-table td {
  padding: 0.5rem 0.375rem;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
  text-align: center;
}
.invoice-template-jnp .items-table td.text-left {
  text-align: left;
}
.invoice-template-jnp .items-table td.text-right {
  text-align: right;
}
.invoice-template-jnp .item-description {
  font-weight: 500;
  text-align: left;
}
.invoice-template-jnp .item-quantity,
.invoice-template-jnp .item-price,
.invoice-template-jnp .item-subtotal,
.invoice-template-jnp .item-vat,
.invoice-template-jnp .item-total {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-weight: 500;
}
.invoice-template-jnp .item-correction {
  color: #dc2626;
  font-weight: 500;
}
.invoice-template-jnp .invoice-totals {
  margin-left: auto;
  width: 300px;
  margin-bottom: 1rem;
}
.invoice-template-jnp .total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.75rem;
}
.invoice-template-jnp .total-row.subtotal {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.invoice-template-jnp .total-row.tax {
  color: #6b7280;
}
.invoice-template-jnp .total-row.total {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  border-top: 1px solid #e5e7eb;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
.invoice-template-jnp .payment-summary {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 0.375rem;
  border: 1px solid #e2e8f0;
}
.invoice-template-jnp .payment-summary h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-template-jnp .payment-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.invoice-template-jnp .payment-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.75rem;
}
.invoice-template-jnp .payment-row.total {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  border-top: 1px solid #e2e8f0;
  border-bottom: none;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
.invoice-template-jnp .barcode-section {
  text-align: center;
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #ffffff;
  border-radius: 0.25rem;
  border: 1px solid #e2e8f0;
}
.invoice-template-jnp .barcode-placeholder {
  display: inline-block;
}
.invoice-template-jnp .barcode-bars {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 0.5rem;
}
.invoice-template-jnp .barcode-bar {
  width: 3px;
  height: 40px;
  background-color: #000;
  border-radius: 1px;
}
.invoice-template-jnp .barcode-text {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.75rem;
  color: #374151;
  font-weight: 500;
}
.invoice-template-jnp .total-in-words {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #fef3c7;
  border-radius: 0.375rem;
  border: 1px solid #f59e0b;
}
.invoice-template-jnp .total-in-words-label {
  font-weight: 600;
  color: #92400e;
  font-size: 0.75rem;
}
.invoice-template-jnp .total-in-words-value {
  color: #92400e;
  font-style: italic;
  font-size: 0.75rem;
}
.invoice-template-jnp .supplier-invoices {
  margin-bottom: 1rem;
}
.invoice-template-jnp .supplier-invoices h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-template-jnp .supplier-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
}
.invoice-template-jnp .supplier-table th {
  background-color: #f1f5f9;
  padding: 0.5rem 0.375rem;
  font-weight: 600;
  color: #374151;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}
.invoice-template-jnp .supplier-table th.text-left {
  text-align: left;
}
.invoice-template-jnp .supplier-table th.text-right {
  text-align: right;
}
.invoice-template-jnp .supplier-table td {
  padding: 0.5rem 0.375rem;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
  text-align: center;
}
.invoice-template-jnp .supplier-table td.text-left {
  text-align: left;
}
.invoice-template-jnp .supplier-table td.text-right {
  text-align: right;
}
.invoice-template-jnp .supplier-name {
  font-weight: 500;
}
.invoice-template-jnp .supplier-amount {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-weight: 500;
}
.invoice-template-jnp .invoice-remarks {
  margin: 1rem 0;
  padding: 1rem;
  background-color: #f0f9ff;
  border-radius: 0.375rem;
  border: 1px solid #0ea5e9;
}
.invoice-template-jnp .invoice-remarks h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0c4a6e;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-template-jnp .remarks-content {
  color: #0c4a6e;
  line-height: 1.4;
  font-size: 0.75rem;
}
.invoice-template-jnp .meter-readings {
  margin: 1rem 0;
}
.invoice-template-jnp .meter-readings h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-template-jnp .meter-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
}
.invoice-template-jnp .meter-table th {
  background-color: #f1f5f9;
  padding: 0.5rem 0.375rem;
  font-weight: 600;
  color: #374151;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}
.invoice-template-jnp .meter-table th.text-left {
  text-align: left;
}
.invoice-template-jnp .meter-table td {
  padding: 0.5rem 0.375rem;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
  text-align: center;
}
.invoice-template-jnp .meter-table td.text-left {
  text-align: left;
}
.invoice-template-jnp .meter-service {
  font-weight: 500;
  text-align: left;
}
.invoice-template-jnp .meter-number {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-weight: 500;
  color: #059669;
}
.invoice-template-jnp .invoice-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.invoice-template-jnp .footer-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.invoice-template-jnp .footer-dates p {
  margin: 0.25rem 0;
  color: #374151;
  font-size: 0.75rem;
}
.invoice-template-jnp .footer-note p {
  color: #6b7280;
  font-size: 0.75rem;
  font-style: italic;
}
.invoice-template-jnp .company-footer {
  text-align: center;
  color: #6b7280;
  font-size: 0.75rem;
}
.invoice-template-jnp .company-footer p {
  margin: 0.125rem 0;
}
.invoice-template-jnp .copyright {
  font-size: 0.65rem;
  color: #9ca3af;
}
@container (min-width: 800px) {
  .invoice-template-jnp .invoice-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .invoice-template-jnp .invoice-meta {
    margin-top: 0 !important;
    text-align: right !important;
  }
  .invoice-template-jnp .bank-accounts {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .invoice-template-jnp .invoice-totals {
    width: 300px !important;
  }
  .invoice-template-jnp .footer-info {
    grid-template-columns: 1fr 1fr !important;
  }
}
@container (max-width: 799px) {
  .invoice-template-jnp {
    /*
    .invoice-header {
        flex-direction: column !important;
        text-align: center !important;
    }*/
  }
  .invoice-template-jnp .invoice-meta {
    margin-top: 0.5rem !important;
    /*text-align: center !important;*/
  }
  .invoice-template-jnp .bank-accounts {
    grid-template-columns: 1fr !important;
  }
  .invoice-template-jnp .invoice-totals {
    width: 100% !important;
  }
  .invoice-template-jnp .footer-info {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .invoice-template-jnp .items-table,
  .invoice-template-jnp .supplier-table,
  .invoice-template-jnp .meter-table {
    font-size: 0.6rem !important;
  }
  .invoice-template-jnp .items-table th,
  .invoice-template-jnp .items-table td,
  .invoice-template-jnp .supplier-table th,
  .invoice-template-jnp .supplier-table td,
  .invoice-template-jnp .meter-table th,
  .invoice-template-jnp .meter-table td {
    padding: 0.375rem 0.25rem !important;
  }
}
.invoice-template-jnp.pdf .invoice-dates,
.invoice-template-jnp.pdf .invoice-footer,
.invoice-template-jnp.pdf .party-details,
.invoice-template-jnp.pdf .items-table td,
.invoice-template-jnp.pdf .supplier-table td,
.invoice-template-jnp.pdf .meter-table td {
  color: #2c2f35;
}
.invoice-template-jnp.pdf .bank-details,
.invoice-template-jnp.pdf .payment-summary,
.invoice-template-jnp.pdf .invoice-remarks,
.invoice-template-jnp.pdf .total-in-words {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

.invoice-template-simple-compact {
  margin: 0 auto 1rem auto;
  font-size: 0.85rem;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/
  /*max-width: 800px;*/
  /* A4 width is 210mm = 595.28pt = 794px (minus 2pt more for your margins)
   * */
  background-color: #fff;
}
.invoice-template-simple-compact .ui.table > tbody > tr > td, .invoice-template-simple-compact .ui.table > tr > td {
  padding: 0.08em 0.5em;
}
.invoice-template-simple-compact .ui.table > thead > tr > th {
  padding: 0.25em 0.5em;
  line-height: 1rem;
}
.invoice-template-simple-compact .ui.grid > .row {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.invoice-template-simple-compact .ui.table {
  margin: 0.3em 0;
}
.invoice-template-simple-compact .ui.grid > .row > .column > img.logo,
.invoice-template-simple-compact .ui.grid > .row > img.logo {
  max-width: 100%;
  max-height: 110px;
}
.invoice-template-simple-compact .ui.ui.ui.compact.grid > .row {
  padding-top: 0rem;
  padding-bottom: 0rem;
}
.invoice-template-simple-compact .invoice-number {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  font-weight: bold;
}
.invoice-template-simple-compact .totals {
  font-size: 1rem;
}
.invoice-template-simple-compact .totals .grand-total-row {
  font-size: 1.2rem;
}
.invoice-template-simple-compact .total-in-words {
  /*
  .total-in-words-label{

  }*/
}
.invoice-template-simple-compact .total-in-words .total-in-words-value {
  font-weight: 600;
}
.invoice-template-simple-compact.pdf {
  box-shadow: none;
  margin: 0 auto;
  padding: 20px 20px 20px 30px;
}

/* fitler */
.filter-block .top-filter-grid {
  margin-bottom: 1em;
}
.filter-block .top-filter-grid .search-column {
  display: inline-block;
  width: calc(100% - 50px);
}
.filter-block .top-filter-grid .advanced-filter-column {
  display: inline-block;
  margin-left: 7px;
}
.filter-block .top-filter-grid .advanced-filter-column > .field {
  padding-top: 11px;
}
.filter-block .top-filter-grid .advanced-filter-column > .field > .ui.icon.button {
  padding-top: 12px;
  padding-bottom: 12px;
  margin-right: 0;
  background-color: #fff;
}

/* announcements */
.announcement-view {
  word-break: break-all;
}

.recent-announcement-list {
  padding: 4px;
}
.recent-announcement-list .grid-under-info {
  color: #808080;
}
.recent-announcement-list .grid-under-info div.column {
  padding-top: 0.5em !important;
}
.recent-announcement-list .paginator {
  padding: 0;
  margin-top: 0.75em;
}

.ui.announcement.list .announcement.item {
  border-left: 4px solid rgba(34, 36, 38, 0.1);
  box-shadow: 2px 2px 2px rgba(34, 36, 38, 0.1);
  border-radius: 4px;
  padding: 12px 8px;
  padding-left: 16px;
  margin-top: 4px;
  word-break: break-all;
  min-height: 60px;
}
.ui.announcement.list .announcement.item .header {
  font-size: large;
  margin-bottom: 6px;
}
.ui.announcement.list .announcement.item .description {
  max-width: 600px;
}
.ui.announcement.list .announcement.item.not-seen {
  border-left: 4px solid #FEB902;
}
.ui.announcement.list .announcement.item.not-seen .header {
  color: #FEB902;
  text-shadow: 1px 1px rgba(34, 36, 38, 0.24);
}
.ui.announcement.list .announcement.item.not-seen > .icon {
  color: #FEB902;
  animation: not-seen-icon 2s infinite;
}
@keyframes not-seen-icon {
  0%, 100% {
    transform: scale(1);
    color: #FEB902;
  }
  50% {
    transform: scale(1.2);
    color: rgb(254.1003937008, 192.0275590551, 27.3996062992);
  }
}
.ui.announcement.list .announcement.item:hover {
  background-color: rgba(34, 36, 38, 0.1);
}

/* activities */
.activity-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #f10c0c;
  color: white;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 50%;
  z-index: 500;
  animation: pulse 1s infinite alternate;
}

@keyframes activity-badge-pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
#activity-flyout.ui.flyout.right > .content {
  height: calc(100vh - 9.1rem);
  padding: 1rem 1.5rem;
}
#activity-flyout .feed {
  height: 100%;
  overflow: auto;
}
#activity-flyout .feed .event {
  border-radius: 8px;
  padding: 8px;
  margin-top: 4px;
}
#activity-flyout .feed .event:hover {
  background-color: rgba(34, 36, 38, 0.1);
}
#activity-flyout .feed .event.unread {
  background-color: rgba(233, 200, 177, 0.219);
}

/* meter readings */
.utility-modal {
  /*
  .utility-modal-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }*/
  /*
  @media (min-width: 768px) {
      .utility-modal-content {
          flex-direction: row;
      }
      .utility-form-container {
          flex: 2;
      }
      .utility-history {
          flex: 2;
          margin-top: 0;
          padding-top: 0;
          border-top: none;
          border-left: 1px solid #eee;
          padding-left: 20px;
      }
  }*/
}
.utility-modal .utility-modal-header .utility-period {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  display: inline-block;
  /*text-align: center;*/
  width: 100%;
  padding: 0;
  margin: 0;
}
.utility-modal .utility-history {
  /* margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid #eee;
   */
}
.utility-modal .utility-history .reading-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.utility-modal .utility-history .reading-item .reading-value {
  color: green;
}
.utility-modal .utility-history .average-reading-item {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 1em;
}
.utility-modal .utility-history h3 {
  margin-top: 0;
}
.utility-modal .utility-form-container {
  /*
  .form-group button {
      width: 100%;
      padding: 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;

      &:hover {
          background-color: #0056b3;
      }
  }*/
}
.utility-modal .utility-form-container .form-group {
  margin-bottom: 1em;
}
.utility-modal .utility-form-container .form-group button:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}
.utility-modal .utility-form-container .form-group button:disabled:hover {
  background-color: #cccccc;
}
.utility-modal .utility-form-container .form-group input.invalid {
  border-color: red;
}
.utility-modal .utility-form-container .form-group .info-input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}
.utility-modal .utility-form-container .form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.utility-modal .utility-form-container .form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.utility-modal .utility-form-container .form-group input:read-only {
  background-color: #f9f9f9;
}
.utility-modal .utility-form-container .error-message {
  color: red;
  font-size: 12px;
  margin: 0;
  margin-top: 5px;
  visibility: hidden;
}
.utility-modal .utility-form-container .error-message.visible {
  visibility: visible;
}

.form .utility-period {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  display: inline-block;
  text-align: center;
  width: 100%;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}
.form .utility-name {
  margin: 0;
  margin-bottom: 15px;
}

.utility-cards {
  display: flex;
  flex-direction: column;
}
.utility-cards.dashboard .utility-card {
  max-width: 1200px;
  min-width: 200px;
}
@media (min-width: 768px) and (max-width: 1450px) {
  .utility-cards.dashboard .utility-card {
    flex-direction: column;
  }
  .utility-cards.dashboard .submit-container {
    width: 100%;
  }
}

.utility-cards .utility-category-header {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: #2d3748;
  margin: 20px 12px 5px 12px;
  padding-left: 8px;
  border-bottom: 1px solid #bbc6d6;
}
.utility-cards .utility-category-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 20px;
}
.utility-cards .utility-card {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  min-width: 400px;
  padding: 10px 16px;
  gap: 4px;
  margin-top: 5px;
  margin-bottom: 10px;
  border-bottom: 4px solid transparent;
}
.utility-cards .utility-card .card-content {
  flex: 1;
}
.utility-cards .utility-card .utility-period {
  font-size: 12px;
  font-weight: 600;
  color: #2d3748;
  display: inline-block;
  /*text-align: center;*/
  width: 100%;
  margin: 0;
}
.utility-cards .utility-card .utility-header {
  margin-bottom: 5px;
}
.utility-cards .utility-card .utility-header i {
  aspect-ratio: 1;
}
.utility-cards .utility-card .utility-name {
  font-size: 24px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.utility-cards .utility-card .property-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  /*color: #4a6cf7;*/
  color: gray;
  text-decoration: none;
}
.utility-cards .utility-card .property-link i {
  font-size: 12px;
}
.utility-cards .utility-card .values-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.utility-cards .utility-card .value-display {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
}
.utility-cards .utility-card .value-display .value-label {
  font-size: 14px;
  color: #718096;
  /*text-align: center;*/
}
.utility-cards .utility-card .value-display .value-text {
  font-size: 16px;
  font-weight: 500;
  color: #2d3748;
  /*text-align: center;*/
}
.utility-cards .utility-card .value-display .value-difference {
  color: #38a169;
  font-weight: 500;
  font-size: 18px;
}
.utility-cards .utility-card .submit-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  min-width: 80px;
}
.utility-cards .utility-card .deadline {
  font-size: 14px;
  color: #718096;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: auto;
}
.utility-cards .utility-card .deadline i {
  font-size: 12px;
}
.utility-cards .utility-card.not-submitted {
  border-bottom: 4px solid #f58d49;
}
.utility-cards .utility-card.not-submitted .deadline {
  color: #f58d49;
}
@media (max-width: 1000px) {
  .utility-cards .utility-card {
    max-width: 1200px;
  }
}
@media (max-width: 550px) {
  .utility-cards .utility-card {
    min-width: 200px;
    flex-direction: column;
  }
  .utility-cards .submit-container {
    width: 100%;
  }
}

/* elements */
/* Extended message content style
 *
 */
.ui.message.action .flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ui.message.action .flex-container .left {
  padding-right: 30px;
}
.ui.message.action .flex-container .right .button,
.ui.message.action .flex-container .right .ui.button {
  white-space: nowrap;
}

.segment-close-btn {
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 6px;
}

.standalone-element {
  padding: 30px 30px;
}
@media only screen and (max-width: 767px) {
  .standalone-element {
    padding: 30px 0px;
  }
}
@media only screen and (max-width: 767px) {
  .standalone-element.aligner {
    display: block;
    height: auto;
  }
}
.standalone-element .login-block {
  text-align: center;
  max-width: 800px;
  margin: auto;
}
.standalone-element .login-block.segment {
  padding: 0;
}
.standalone-element .login-block .row {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .standalone-element .login-block .row {
    display: inline-block;
    width: 100%;
  }
}
.standalone-element .login-block .column {
  padding: 50px 20px;
  flex-direction: column;
  flex: 50%;
}
@media only screen and (max-width: 767px) {
  .standalone-element .login-block .column {
    display: inline-block;
    width: 100%;
  }
}
.standalone-element .login-block .register-col {
  background-color: #5D6977;
  color: #fff;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.standalone-element .login-block .register-col .ui.header {
  color: #fff;
}
@media only screen and (min-width: 767px) and (min-height: 560px) {
  .standalone-element.page-login {
    padding-top: 100px;
  }
}

.img-segment {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}
.img-segment.onboarding {
  background-image: url("/images/bg/elevate-digital.jpg");
}
.img-segment.onboarding .discount-perc {
  font-size: 3rem;
}
.img-segment.light h1, .img-segment.light h2, .img-segment.light h3, .img-segment.light h4, .img-segment.light h5, .img-segment.light p, .img-segment.light ul, .img-segment.light li, .img-segment.light div {
  color: #fff;
}

.driver-overlay {
  /* Fix for disableActiveInteraction: true not working.
   * https://github.com/kamranahmedse/driver.js/issues/423
   */
  pointer-events: unset !important;
}

.driver-popover .driver-popover-navigation-btns button {
  cursor: pointer;
  display: inline-block;
  min-height: 1em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  color: rgba(0, 0, 0, 0.6);
  font-family: Lato, system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 0 0.25em 0 0;
  padding: 0.78571429em 1.5em 0.78571429em;
  text-transform: none;
  text-shadow: none;
  font-weight: 700;
  line-height: 1em;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  border-radius: 0.28571429rem;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  will-change: auto;
  -webkit-tap-highlight-color: transparent;
  background-color: #2185d0;
  color: #fff;
  text-shadow: none;
  background-image: none;
  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.driver-popover .driver-popover-navigation-btns button:hover {
  background-color: #1678c2;
  color: #fff;
  text-shadow: none;
}
.driver-popover .driver-popover-navigation-btns button:focus {
  background-color: #0d71bb;
  color: #fff;
  text-shadow: none;
}
.driver-popover .driver-popover-navigation-btns button:active {
  background-color: #1a69a4;
  color: #fff;
  text-shadow: none;
}

.ui.cards > .ui.card.border.green {
  box-shadow: 0 1px 3px 0 #21ba45, 0 0 0 1px #21ba45;
}

@media only screen and (max-width: 767px) {
  .invoice-simulator-report .ui.segment.entry-block {
    overflow-x: auto;
  }
  .invoice-simulator-report .ui.segment.entry-block .column {
    padding-left: 0;
    padding-right: 0;
  }
  .invoice-simulator-report .ui.segment.entry-block table {
    width: 100%;
  }
}
@media only screen and (max-width: 1200px) {
  .invoice-simulator-report .ui.segment.entry-block .ui[class*="two column"].grid.table-grid > .column:not(.row) {
    width: 100%;
  }
}

.multi-uploader label .ui.header.icon,
.multi-uploader label .ui.header {
  margin-bottom: 2px;
}
.multi-uploader label .under-note {
  text-align: center;
}
.multi-uploader .thumb-list {
  margin-top: 5px;
  display: flex;
  gap: 10px;
}
.multi-uploader .thumb-list .thumb-item {
  position: relative;
  margin-bottom: 5px;
  width: 166px;
  height: 100px;
  overflow: hidden;
  cursor: all-scroll;
}
.multi-uploader .thumb-list .thumb-item .abort,
.multi-uploader .thumb-list .thumb-item .trash,
.multi-uploader .thumb-list .thumb-item .download-btn {
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
  color: #fff;
}
.multi-uploader .thumb-list .thumb-item .abort:hover,
.multi-uploader .thumb-list .thumb-item .trash:hover,
.multi-uploader .thumb-list .thumb-item .download-btn:hover {
  color: #fff;
}
.multi-uploader .thumb-list .thumb-item .progress {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  width: 90%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.multi-uploader .thumb-list .thumb-item .bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.2s;
}
.multi-uploader .thumb-list .thumb-item .sim-thumb {
  display: none;
  width: 100%;
  height: 100%;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.05);
}
.multi-uploader .thumb-list .thumb-item .sim-thumb .thumb-content {
  width: 100%;
  font-size: 3rem;
  color: #7f7f7f;
  padding: 7px;
}
.multi-uploader .thumb-list .thumb-item .sim-thumb .thumb-content .label {
  overflow: hidden;
  margin-top: 4px;
  display: block;
  width: 100%;
  font-size: 0.85rem;
  line-height: normal;
  word-wrap: break-word;
}
.multi-uploader .thumb-list .thumb-item:hover .bg {
  transform: scale(1.1);
}
.multi-uploader.small .ui.placeholder.segment {
  min-height: 8rem;
}
.multi-uploader.small .ui.icon.header > .icons, .multi-uploader.small .ui.icon.header > .image.icon, .multi-uploader.small .ui.icon.header > i.icon {
  font-size: 2rem;
}

body.theme-v1 main {
  /*background-image: linear-gradient(135deg, #fbfdff 0%, #d4dff0 100%); */
  background: radial-gradient(circle at center, #fbfdff 0%, #DFE8F4 100%);
  /*background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2
   * 100%);*/
  /*background-color: #F5F9FC;*/
  /*background-color: #f1f4f5;*/
  /*
   * background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
   */
  /*
   *background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  */
  /*
  * background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  */
  /*
   * https://webgradients.com/
   */
}
body.theme-v1 #sidebar .sidebar-wrapper {
  background-color: #fff;
}

.meter-report-result .final-th {
  width: 200px;
}

.ui.selection.dropdown .menu > .item.sub {
  padding-left: 25px;
}

.ql-snow .ql-tooltip {
  z-index: 10;
}

.filemanager-open main {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.filemanager-open .ui.container {
  display: flex;
  flex: 1;
  width: 100% !important;
}
.filemanager-open .iframe-container {
  flex: 1;
  overflow: hidden;
}
.filemanager-open iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
  visibility: hidden !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

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