@charset "UTF-8";
/*$light-secondary-warning-color: hsl(355, 67%, 45%);*/
/*$light-secondary-warning-color: hsl(355, 67%, 45%);*/
/*blue*/
/*dark-blue*/
/*light-blue*/
/*light-green*/
/*orange*/
/*pink*/
/*purple*/
/*red*/
/*salmon*/
@import url("../Styles/scss/open-iconic/font/css/open-iconic-bootstrap.min.css");
.qr-scan-ico {
  background: url("../Styles/img/ico_qrcode_scan.svg");
  background-position: center;
  background-repeat: no-repeat;
}

.delete-icon, .icon-btn.delete {
  background-image: url("/img/ico-delete.svg");
}

.check-icon, .icon-btn.confirm {
  background-image: url("/img/ico-check.svg");
}

.title, .brewery-wrapper .recipe-wrapper .recipe-title {
  font-size: 25px;
  text-align: left;
}

p {
  color: var(--primary-text-color);
}

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

html, body {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--primary-background-color);
  color: var(--primary-text-color);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  font-weight: lighter;
  line-height: 1.5;
  text-align: left;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  background-color: #171717;
  padding-top: 1.1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
}

.content-wrapper {
  background-color: #292929;
  height: 100vh;
  padding: 15px;
  border-radius: 6px;
}

article {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

main {
  flex: 1;
  background-color: #171717;
  display: flex;
}

p {
  margin-bottom: 0px;
}

h1 {
  color: var(--primary-text-color);
}

h3 {
  color: var(--primary-text-color);
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/**
 * Clear inner floats
 */
/*.clearfix::after {
  clear: both;
  content: '';
  display: table;
}*/
/**
 * Main content containers
 * 1. Make the container full-width with a maximum width
 * 2. Center it in the viewport
 * 3. Leave some space on the edges, especially valuable on small screens
 */
/*.container {
  max-width: $max-width;*/ /* 1 */
/*margin-left: auto;*/ /* 2 */
/*margin-right: auto;*/ /* 2 */
/*padding-left: 20px;*/ /* 3 */
/*padding-right: 20px;*/ /* 3 */
/*width: 100%;*/ /* 1 */
/*}*/
/**
 * Hide text while making it readable for screen readers
 * 1. Needed in WebKit-based browsers because of an implementation bug;
 *    See: https://code.google.com/p/chromium/issues/detail?id=457146
 */
/*.hide-text {
  overflow: hidden;
  padding: 0;*/ /* 1 */
/*text-indent: 101%;
  white-space: nowrap;
}*/
/**
 * Hide element while making it readable for screen readers
 * Shamelessly borrowed from HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
/*.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}*/
.disable-click {
  cursor: default;
}

.b {
  font-weight: 700;
}

.col-1, .col-full {
  width: 100%;
}

.col-2 {
  width: calc(50% - 15px);
  /*    @else {
          @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 1024px) {
  .col-2 {
    width: 100%;
  }
}

.col-3 {
  width: calc(33.3333333333% - 15px);
}

.col-4 {
  width: calc(25% - 15px);
}

.col-fill {
  flex: 1;
}

.center {
  text-align: center;
}

.relative {
  position: relative;
}

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

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

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.height-fit {
  height: fit-content !important;
}

.fh, .height-full {
  height: 100% !important;
}

.fw {
  width: 100%;
}

.width-col {
  width: 12.5%;
}

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

.flex-row {
  flex-direction: row !important;
}

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

.flex-center {
  justify-content: center;
  align-items: center;
}

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

.flex1 {
  flex: 1;
}

.table-flex {
  flex: 1;
  overflow: auto;
}

.small-input-box {
  width: 80px !important;
}

.stick-top {
  position: sticky;
  top: 0;
  z-index: 2;
}
.stick-top td {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--primary-thead-background-color);
}

.side-padding {
  padding: 0px 15px;
}

.margin-zero {
  margin-top: 0px;
  margin-bottom: 0px;
}

.line-break {
  text-overflow: ellipsis;
  overflow: hidden;
}

.flex-direction-row-to-column {
  flex-direction: row;
  /*    @else {
          @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 1024px) {
  .flex-direction-row-to-column {
    flex-direction: column;
  }
}

.no-border {
  border: none !important;
}

.gray {
  color: var(--secondary-color);
}

.green {
  color: var(--primary-color);
}

.red {
  color: var(--primary-warning-color);
}

.info-red {
  color: var(--tertiary-warning-color);
}

.warning-red {
  color: var(--secondary-warning-color);
}

.black {
  color: var(--primary-text-color);
}

.power-button {
  background-color: transparent !important;
  color: white;
  border-radius: 6px;
  /*padding: 10px 20px;*/
  border: 2px #E84363 solid !important;
}

.discard-item-button {
  background-repeat: no-repeat;
  background-image: url("../Styles/img/ico_close.svg");
  background-position: center;
  background-color: transparent;
  border: none;
  margin-left: 10px;
  width: 40px;
  height: 40px;
  margin-top: auto;
  margin-bottom: auto;
  border-left: 1px solid var(--text-color);
}

button {
  /*    background: var(--primary-color);
      box-shadow: 0px 4px 6px rgba(71, 160, 143, 0.3);
      border-radius: 4px;
      color: var(--secondary-text-color);
      border: none;
      padding: 10px 20px;
      position: relative;*/
}
button.loading {
  cursor: default;
  width: max-content;
  padding-left: 45px;
  text-align: end;
}
button.loading:hover {
  padding: 3px 14px 3px 43px !important;
}
button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  margin-top: -10px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  display: inline-block;
}
button:disabled {
  opacity: 0.4;
}

.generic-button, .pl-actions div, .context, .dashboard-context, .info-btn, .icon-btn, .table-menu, .back, .ares-button, .auth-page-button, .register-button, .login-button, .plan-button, .sub-info-bottom-buttons .sub-left-buttons-wrapper .cancel-sub-btn, .sub-info-bottom-buttons .sub-left-buttons-wrapper .sub-history-btn, .sub-info-bottom-buttons .payment-button, .category-button, .checkout-without-recurrence, .checkout, .secondary-button, .power-button {
  padding: 5px 16px;
  /*margin: 17px 10px;*/
  font-size: 13px;
  line-height: 19px;
  background-color: var(--primary-color);
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  color: var(--secondary-text-color);
  box-shadow: none;
  outline: none;
  height: 30px;
  border: none;
  border-radius: 4px;
  /*    @include respond-to('large') {
      &.hide-text {
          text-indent: -9999px;            
     }
  }

  @include respond-to('tiny') {
      &.checkout, &.checkout-without-recurrence {
          font-size: $medium-font-size;
      }
  }*/
}
.generic-button:hover, .pl-actions div:hover, .context:hover, .dashboard-context:hover, .info-btn:hover, .icon-btn:hover, .table-menu:hover, .back:hover, .ares-button:hover, .auth-page-button:hover, .register-button:hover, .login-button:hover, .plan-button:hover, .sub-info-bottom-buttons .sub-left-buttons-wrapper .cancel-sub-btn:hover, .sub-info-bottom-buttons .sub-left-buttons-wrapper .sub-history-btn:hover, .sub-info-bottom-buttons .payment-button:hover, .category-button:hover, .checkout-without-recurrence:hover, .checkout:hover, .secondary-button:hover, .power-button:hover {
  cursor: pointer;
}

.secondary-button {
  background-color: #3d3d3d;
}
.secondary-button:hover {
  cursor: pointer;
}

.checkout {
  font-size: 20px;
  width: 100%;
  line-height: 50px;
  margin: 0px 0px 15px 0px;
  width: 100%;
  line-height: 40px;
}
.checkout:hover {
  border: solid 2px var(--primary-color);
  color: var(--primary-text-color);
  background-color: transparent;
  padding: 3px 14px;
}

.checkout-without-recurrence {
  /*font-size: 20px;*/
  background-color: transparent;
  text-decoration: underline;
  padding: 0px;
  margin: 0px;
  font-size: 15px;
  color: var(--primary-text-color);
}

.plan-button, .sub-info-bottom-buttons .sub-left-buttons-wrapper .cancel-sub-btn, .sub-info-bottom-buttons .sub-left-buttons-wrapper .sub-history-btn, .sub-info-bottom-buttons .payment-button, .category-button {
  float: right;
  width: max-content;
  margin-top: 0px;
  text-align: center;
  line-height: 22px;
  border-radius: 5px;
  color: var(--secondary-text-color);
}
.plan-button:hover, .sub-info-bottom-buttons .sub-left-buttons-wrapper .cancel-sub-btn:hover, .sub-info-bottom-buttons .sub-left-buttons-wrapper .sub-history-btn:hover, .sub-info-bottom-buttons .payment-button:hover, .category-button:hover {
  border: solid 2px var(--primary-add-button-hover-color);
  padding: 3px 14px;
}

.category-button {
  /*width: 190px;*/
  width: auto;
  margin: 0px;
  line-height: 25px;
  float: none;
  max-height: 40px;
  /*    @else {
          @error 'No value found for `tiny`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 550px) {
  .category-button {
    float: left !important;
    margin: 10px 0 !important;
  }
}

.login-button {
  color: var(--secondary-text-color);
  border-radius: 4px;
  line-height: 0;
  /*font-size: 14px;*/
  font-size: 13px;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
.login-button:hover {
  color: #ffffff;
}
@media only screen and (max-width: 660px) {
  .login-button {
    margin-right: 0px;
  }
}

.register-button {
  /*font-size: 14px;*/
  font-size: 13px;
  line-height: 0;
  border: solid 2px var(--primary-color);
  padding: 3px 14px;
  color: var(--primary-text-color);
  background-color: transparent;
  border-radius: 4px;
  margin-right: 0px;
  margin-left: 0px;
}

.auth-page-button {
  color: var(--secondary-text-color);
  border-radius: 4px;
  margin: 0px;
  height: 40px;
  font-size: 15px;
}
.auth-page-button:hover {
  border: solid 2px var(--primary-color);
  padding: 3px 14px;
  color: var(--primary-text-color);
  background-color: transparent;
}

.ares-button {
  margin-left: 10px;
  margin-right: 0px;
  height: max-content;
  top: 32px !important;
}

/*.change-plan {
    @extend .generic-button;
    float: left;
    background: var(--primary-delete-button-background-color);
    color: var(--secondary-text-color) !important;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 10px;
    padding: 10px 15px 10px 45px;
    font-size: 15px;
    background-image: url("../img/ico-arrow-left.svg");
    background-position: left 10px center !important;
    // white-space: nowrap;
    &:hover {
        border: solid 2px var(--primary-color);
        padding: 8px 13px 8px 43px;
        background-position: left 8px center !important;
    }
}*/
.back {
  line-height: 10px;
  /*padding: 10px 10px 10px 0px;*/
  padding: 20px;
  margin: 0px;
  /*margin-left: 0px;
      margin-right: 10px;*/
  background-image: var(--ico-back);
  background-position: center !important;
  background-color: transparent;
  border: 1px solid transparent;
}
.back:hover {
  filter: var(--primary-filter-color);
}

.table-menu {
  line-height: 10px;
  padding: 10px 20px;
  /*background-image: url("../img/dots-icon.svg");*/
  background-position: center !important;
  background-color: var(--primary-delete-button-background-color);
}
.table-menu:hover {
  border: solid 2px var(--secondary-separator-color) !important;
  padding: 8px 18px !important;
}

.icon-btn {
  line-height: 10px;
  padding: 10px 45px 10px 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  /*    @else {
          @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 1024px) {
  .icon-btn {
    padding: 10px 20px 10px 20px !important;
  }
}
.icon-btn:hover {
  /*border: solid 2px var(--primary-add-button-hover-color) !important;*/
  /*padding: 8px 43px 8px 18px;*/
  background-position: right 8px center !important;
  cursor: pointer;
  /*    @else {
          @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 1024px) {
  .icon-btn:hover {
    padding: 8px 18px 8px 18px !important;
  }
}
.icon-btn.delete {
  /*&.delete {*/
  /*background-color: var(--primary-delete-button-background-color);*/
  color: var(--secondary-text-color) !important;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 5px;
  border: solid 2px #EF4136;
  padding: 8px 43px 8px 18px;
  background-color: transparent;
  background-position: right 8px center !important;
  /*}*/
}
.icon-btn.delete:hover {
  opacity: 0.8;
  border: solid 2px #EF4136 !important;
  /*border: solid 2px #DD1426 !important;*/
  /*padding: 8px 43px 8px 18px;
  background-position: right 8px center !important;*/
  /*            @include respond-to('large') {
      border: solid 1px var(--primary-delete-button-hover-color) !important;
      padding: 9px 19px 9px 19px !important;
      background-position: right 9px center !important;
  }*/
}
.icon-btn.deny {
  background-color: var(--primary-delete-button-background-color);
  color: var(--secondary-text-color) !important;
}
.icon-btn.deny:hover {
  /*border: solid 2px var(--primary-delete-button-hover-color) !important;*/
  /*padding: 8px 43px 8px 18px;*/
  /*background-position: right 8px center !important;*/
  /*    @else {
          @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 1024px) {
  .icon-btn.deny:hover {
    border: solid 2px var(--primary-delete-button-hover-color) !important;
    padding: 8px 18px 8px 18px !important;
    background-position: right 8px center !important;
  }
}
.icon-btn.confirm {
  /*background-image: url("../img/ico-check.svg");*/
}
.icon-btn.confirm:hover {
  /*border: solid 2px var(--primary-add-button-hover-color) !important;*/
  /*padding: 8px 43px 8px 18px;*/
  /*background-position: right 8px center !important;*/
  color: var(--primary-text-color);
  /*    @else {
          @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 1024px) {
  .icon-btn.confirm:hover {
    border: solid 2px var(--primary-add-button-hover-color) !important;
    padding: 8px 18px 8px 18px !important;
    background-position: right 8px center !important;
  }
}

.info-btn {
  line-height: 10px;
  padding: 20px 10px;
  margin: 0px;
  background-position: center !important;
  border: none;
  box-shadow: none;
  background-color: transparent;
  filter: var(--primary-icon-filter-color);
}

.context, .dashboard-context {
  margin-bottom: 5px;
  margin-top: 5px;
  width: -webkit-fill-available;
  width: -moz-available;
  margin-right: 10px !important;
  margin-left: 10px !important;
  /*    &:hover {
      border: solid 2px var(--primary-add-button-hover-color);
      padding: 3px !important;
      background-position: right 8px center !important;
  }*/
}
.context.delete, .dashboard-context.delete {
  float: left;
  background-color: var(--primary-delete-button-background-color);
  color: var(--secondary-text-color) !important;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  /*margin-right: 0px;   */
}
.context.delete:hover, .dashboard-context.delete:hover {
  border: solid 2px var(--primary-delete-button-hover-color) !important;
  padding: 3px 14px 3px 14px !important;
  background-position: right 8px center !important;
}

.context:hover {
  border: solid 2px var(--primary-separator-color) !important;
  padding: 3px 14px 3px 14px !important;
  background-position: right 8px center !important;
}

.dashboard-context {
  background-color: transparent;
  border-radius: 0;
  border-bottom: 0.5px solid;
  text-align: start;
  margin-bottom: 7px;
  margin-top: 7px;
  padding-left: 0px;
  padding-right: 0px;
  color: var(--primary-text-color);
  border-color: var(--primary-separator-color);
}
.dashboard-context:hover {
  color: var(--primary-color);
  border: none;
  border-bottom: 0.5px solid;
  border-color: var(--primary-separator-color);
}
.dashboard-context.active {
  color: var(--primary-color);
  border: none;
  border-bottom: 0.5px solid;
  border-color: var(--primary-separator-color);
}

a.ico,
.round-button {
  display: inline-block;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  vertical-align: middle;
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  right: 0px;
  top: 0px;
  margin-left: 4px;
}
a.ico.green,
.round-button.green {
  background-color: var(--primary-color);
}
a.ico.green:hover,
.round-button.green:hover {
  border: solid 1px var(--primary-color);
  padding: 1px 13px;
  background-color: var(--tertiary-background-color);
}
a.ico.red,
.round-button.red {
  background-color: var(--primary-delete-button-background-color);
}
a.ico.red:hover,
.round-button.red:hover {
  border: solid 2px var(--primary-delete-button-hover-color);
  padding: 0px 12px;
}
a.ico.table-btn,
.round-button.table-btn {
  background-color: var(--primary-delete-button-background-color);
}
a.ico.table-btn:hover,
.round-button.table-btn:hover {
  border: solid 2px var(--primary-color);
  padding: 0px 12px;
}
a.ico.table-btn:focus,
.round-button.table-btn:focus {
  border: solid 2px var(--primary-color);
  padding: 0px 12px;
}

.sub-info-bottom-buttons {
  display: flex;
  width: 100%;
  line-height: 70px;
  height: 55px;
  margin-top: 0px;
  justify-content: space-between;
  padding: 15px 0px;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 660px) {
  .sub-info-bottom-buttons {
    height: max-content;
  }
}
.sub-info-bottom-buttons .payment-button {
  width: 190px;
  margin: 0px;
  line-height: 25px;
  padding: 0px;
  height: 40px;
  margin-left: 10px;
}
.sub-info-bottom-buttons .sub-left-buttons-wrapper {
  height: 40px;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 660px) {
  .sub-info-bottom-buttons .sub-left-buttons-wrapper {
    display: flow-root;
    height: max-content;
  }
}
.sub-info-bottom-buttons .sub-left-buttons-wrapper .sub-history-btn {
  max-width: 190px;
  margin: 0px 10px 0px 0px;
  line-height: 30px;
  height: 40px;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 660px) {
  .sub-info-bottom-buttons .sub-left-buttons-wrapper .sub-history-btn {
    float: left;
    margin-bottom: 10px;
  }
}
.sub-info-bottom-buttons .sub-left-buttons-wrapper .cancel-sub-btn {
  margin-left: 10px;
  width: 190px;
  margin: 0px;
  line-height: 25px;
  padding: 0px 5px;
  height: 40px;
  background-color: var(--primary-delete-button-background-color);
  color: var(--secondary-text-color) !important;
  float: left;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
.sub-info-bottom-buttons .sub-left-buttons-wrapper .cancel-sub-btn:hover {
  border: solid 2px var(--primary-delete-button-hover-color) !important;
}
@media only screen and (max-width: 660px) {
  .sub-info-bottom-buttons .sub-left-buttons-wrapper .cancel-sub-btn {
    margin-left: 0px;
  }
}

.edit-btn:hover {
  cursor: pointer;
  text-decoration: underline;
}

.btn-hide-text-primary {
  /*    @else {
          @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 1024px) {
  .btn-hide-text-primary {
    text-indent: -9999px;
    padding: 10px 20px !important;
  }
}

.time-period {
  padding: 0px 10px;
  border-radius: 0;
  font-size: 13px;
  box-shadow: none;
  color: var(--primary-color);
  background-color: transparent;
}
.time-period.active {
  color: var(--secondary-text-color);
  background-color: var(--primary-color);
}

article.content:has(.brewery-control-panel) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.brewery-control-panel {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.brewery-control-panel .control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.brewery-control-panel .control-header .panel-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}
.brewery-control-panel .control-header .header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brewery-control-panel .control-header .mode-toggle {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 12px;
}
.brewery-control-panel .control-header .mode-toggle .mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.brewery-control-panel .control-header .mode-toggle .mode-btn .mode-icon {
  font-size: 18px;
}
.brewery-control-panel .control-header .mode-toggle .mode-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}
.brewery-control-panel .control-header .mode-toggle .mode-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.brewery-control-panel .control-header .settings-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  color: #e0e7ff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.brewery-control-panel .control-header .settings-btn .settings-icon {
  font-size: 1.2rem;
}
.brewery-control-panel .control-header .settings-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.brewery-control-panel .control-header .settings-btn:active {
  transform: translateY(0);
}
.brewery-control-panel .power-section {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}
.brewery-control-panel .power-section .power-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.brewery-control-panel .power-section .power-header .power-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brewery-control-panel .power-section .power-header .power-display {
  font-size: 20px;
  font-weight: 700;
  color: #667eea;
}
.brewery-control-panel .power-section .power-control-modern {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brewery-control-panel .power-section .power-control-modern .power-decrement,
.brewery-control-panel .power-section .power-control-modern .power-increment {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.brewery-control-panel .power-section .power-control-modern .power-decrement:hover,
.brewery-control-panel .power-section .power-control-modern .power-increment:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}
.brewery-control-panel .power-section .power-control-modern .power-decrement:active,
.brewery-control-panel .power-section .power-control-modern .power-increment:active {
  transform: scale(0.95);
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container {
  flex: 1;
  position: relative;
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container .power-range {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s ease;
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container .power-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s ease;
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container .power-range::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container .power-steps {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.brewery-control-panel .power-section .power-control-modern .power-slider-container .power-steps .power-step-mark {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  position: absolute;
  transform: translateX(-50%);
}
.brewery-control-panel .vessels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
@media (min-width: 1920px) {
  .brewery-control-panel .vessels-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}
.brewery-control-panel .vessel-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
}
.brewery-control-panel .vessel-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.brewery-control-panel .vessel-card .vessel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.brewery-control-panel .vessel-card .vessel-header .vessel-name {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.brewery-control-panel .vessel-card .vessel-header .vessel-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brewery-control-panel .vessel-card .vessel-header .vessel-status .status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  transition: all 0.3s ease;
}
.brewery-control-panel .vessel-card .vessel-header .vessel-status .status-indicator.on {
  background: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}
.brewery-control-panel .vessel-card .vessel-header .vessel-status .power-toggle-btn {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.brewery-control-panel .vessel-card .vessel-header .vessel-status .power-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}
.brewery-control-panel .vessel-card .vessel-header .vessel-status .status-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
}
.brewery-control-panel .vessel-card .vessel-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.brewery-control-panel .vessel-card .vessel-metrics .metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brewery-control-panel .vessel-card .vessel-metrics .metric-item .metric-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brewery-control-panel .vessel-card .vessel-metrics .metric-item .metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}
.brewery-control-panel .vessel-card .vessel-metrics .metric-item .metric-value .metric-unit {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4px;
}
.brewery-control-panel .vessel-card .agitators-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-header .agitator-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-value-small {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  min-width: 45px;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-slider-small {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-slider-small::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
}
.brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-slider-small::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.brewery-control-panel .toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.brewery-control-panel .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.brewery-control-panel .toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.brewery-control-panel .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}
.brewery-control-panel .toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.3s;
  border-radius: 26px;
}
.brewery-control-panel .toggle-switch .toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}
.brewery-control-panel .toggle-switch-small {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.brewery-control-panel .toggle-switch-small input {
  opacity: 0;
  width: 0;
  height: 0;
}
.brewery-control-panel .toggle-switch-small input:checked + .toggle-slider-small {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.brewery-control-panel .toggle-switch-small input:checked + .toggle-slider-small:before {
  transform: translateX(18px);
}
.brewery-control-panel .toggle-switch-small .toggle-slider-small {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.3s;
  border-radius: 22px;
}
.brewery-control-panel .toggle-switch-small .toggle-slider-small:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}
.brewery-control-panel .pump-control {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}
.brewery-control-panel .pump-control .control-item .control-header-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.brewery-control-panel .pump-control .control-item .control-header-item .control-label {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}
.brewery-control-panel .pump-control .control-item .power-control-compact {
  display: flex;
  align-items: center;
  gap: 16px;
}
.brewery-control-panel .pump-control .control-item .power-control-compact .power-value {
  font-size: 20px;
  font-weight: 700;
  color: #667eea;
  min-width: 60px;
}
.brewery-control-panel .pump-control .control-item .power-control-compact .power-slider {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.brewery-control-panel .pump-control .control-item .power-control-compact .power-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}
.brewery-control-panel .pump-control .control-item .power-control-compact .power-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}
.brewery-control-panel .electricity-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
}
.brewery-control-panel .electricity-panel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.brewery-control-panel .electricity-panel .electricity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.brewery-control-panel .electricity-panel .electricity-header .electricity-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brewery-control-panel .electricity-panel .electricity-header .total-power {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.brewery-control-panel .electricity-panel .electricity-header .total-power .total-power-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brewery-control-panel .electricity-panel .electricity-header .total-power .total-power-value {
  font-size: 28px;
  font-weight: 700;
  color: #f59e0b;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.brewery-control-panel .electricity-panel .electricity-header .total-power .total-power-value .power-unit {
  font-size: 14px;
  font-weight: 400;
  color: rgba(245, 158, 11, 0.7);
}
.brewery-control-panel .electricity-panel .electricity-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-header .phase-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric .metric-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric .metric-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric .metric-content .metric-label-small {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric .metric-content .metric-value-small {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}
.brewery-control-panel .automatic-controls .program-section {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}
.brewery-control-panel .automatic-controls .program-section .program-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.brewery-control-panel .automatic-controls .program-section .program-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.brewery-control-panel .automatic-controls .program-section .program-header .start-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.brewery-control-panel .automatic-controls .program-section .program-header .start-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
.brewery-control-panel .automatic-controls .program-section .program-header .start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.brewery-control-panel .automatic-controls .program-section .steps-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card {
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card.active {
  background: rgba(102, 126, 234, 0.15);
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card.ramp-step {
  background: rgba(251, 146, 60, 0.1);
  border-color: rgba(251, 146, 60, 0.3);
  border-left: 3px solid #fb923c;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card.ramp-step.active {
  background: rgba(251, 146, 60, 0.2);
  border-color: #fb923c;
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card.ramp-step .step-number {
  background: rgba(251, 146, 60, 0.2) !important;
  color: #fb923c !important;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card.ramp-step .step-label {
  font-size: 12px;
  font-weight: 600;
  color: #fb923c;
  text-transform: uppercase;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 13px;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact.completed {
  opacity: 0.6;
  border-left: 3px solid #10b981;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact.pending {
  opacity: 0.4;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact.ramp-step {
  border-left: 3px solid #fb923c;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact.ramp-step.completed {
  border-left: 3px solid #fb923c;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-number-compact {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-icon {
  font-size: 12px;
  flex-shrink: 0;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-temp-compact {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-duration-compact {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  flex-shrink: 0;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-status {
  margin-left: auto;
  color: #10b981;
  font-size: 16px;
  flex-shrink: 0;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact:hover {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.1);
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-number {
  width: 32px;
  height: 32px;
  background: rgba(102, 126, 234, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #667eea;
  font-size: 14px;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-info .step-temp {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-info .step-duration {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-name {
  width: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-top: 4px;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress {
  margin-top: 12px;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .progress-track .progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: 4px;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .progress-track .progress-fill.active {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .progress-track .progress-fill.completed {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .step-time-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .step-time-info .progress-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .step-time-info .step-start-time {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .step-time-info .step-end-time {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-progress .step-time-info .step-remaining-time {
  color: #667eea;
  font-weight: 600;
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .overall-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .overall-progress-header .progress-label {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .overall-progress-header .progress-percentage {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .progress-track-large {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .progress-track-large .progress-fill-large {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s ease;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(102, 126, 234, 0.4);
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .overall-time-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .overall-time-info .remaining-time {
  color: #667eea;
  font-weight: 600;
}
.brewery-control-panel .automatic-controls .program-section .overall-progress-section .overall-time-info .end-time {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.brewery-control-panel .automatic-controls .program-section .status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.brewery-control-panel .automatic-controls .program-section .status-grid .status-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.brewery-control-panel .automatic-controls .program-section .status-grid .status-item .status-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brewery-control-panel .automatic-controls .program-section .status-grid .status-item .status-value {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}
.brewery-control-panel .automatic-controls .program-section .status-grid .status-item .status-value.running {
  color: #10b981;
}
.brewery-control-panel .automatic-controls .program-section .status-grid .status-item .status-value.stopped {
  color: rgba(255, 255, 255, 0.5);
}
.brewery-control-panel .emergency-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid rgba(239, 68, 68, 0.3);
  display: flex;
  justify-content: center;
}
.brewery-control-panel .emergency-section .emergency-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.brewery-control-panel .emergency-section .emergency-btn .emergency-icon {
  font-size: 20px;
}
.brewery-control-panel .emergency-section .emergency-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}
.brewery-control-panel .emergency-section .emergency-btn:active {
  transform: translateY(0);
}

@media (min-width: 1921px) {
  .brewery-control-panel {
    max-width: 1800px;
  }
  .brewery-control-panel .vessels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .brewery-control-panel .vessel-card {
    padding: 28px;
  }
}
@media (min-width: 1441px) and (max-width: 1920px) {
  .brewery-control-panel .vessels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 1440px) and (min-width: 1025px) {
  .brewery-control-panel {
    padding: 20px;
  }
  .brewery-control-panel .vessels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .brewery-control-panel .vessel-card {
    padding: 20px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics {
    gap: 12px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics .metric-value {
    font-size: 22px;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .brewery-control-panel {
    padding: 20px;
  }
  .brewery-control-panel .control-header .panel-title {
    font-size: 24px;
  }
  .brewery-control-panel .control-header .mode-toggle .mode-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  .brewery-control-panel .vessels-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .brewery-control-panel .vessel-card {
    padding: 20px;
  }
  .brewery-control-panel .vessel-card .vessel-header .vessel-name {
    font-size: 20px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics .metric-value {
    font-size: 22px;
  }
  .brewery-control-panel .vessel-card .power-section {
    padding: 14px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-decrement,
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-increment {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item {
    padding: 10px;
  }
  .brewery-control-panel .automatic-controls .program-section {
    padding: 20px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-header h3 {
    font-size: 18px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card {
    padding: 14px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-info {
    flex-direction: column;
    gap: 4px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-info .step-temp {
    font-size: 16px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact {
    padding: 6px 10px;
    gap: 10px;
    font-size: 12px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-number-compact {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .brewery-control-panel .automatic-controls .program-section .status-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .brewery-control-panel .automatic-controls .program-section .status-grid .status-item {
    padding: 12px;
  }
  .brewery-control-panel .automatic-controls .program-section .status-grid .status-item .status-value {
    font-size: 18px;
  }
  .brewery-control-panel .pump-control {
    padding: 16px;
  }
  .brewery-control-panel .electricity-panel {
    padding: 16px;
  }
  .brewery-control-panel .electricity-panel .electricity-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .brewery-control-panel .electricity-panel .electricity-header .electricity-title {
    font-size: 16px;
  }
  .brewery-control-panel .electricity-panel .electricity-header .total-power .total-power-value {
    font-size: 22px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}
@media (max-width: 767px) {
  .brewery-control-panel {
    padding: 16px;
    border-radius: 16px;
  }
  .brewery-control-panel .control-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  .brewery-control-panel .control-header .panel-title {
    font-size: 22px;
    width: 100%;
  }
  .brewery-control-panel .control-header .mode-toggle {
    width: 100%;
    justify-content: stretch;
    padding: 3px;
  }
  .brewery-control-panel .control-header .mode-toggle .mode-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
  }
  .brewery-control-panel .control-header .mode-toggle .mode-btn .mode-icon {
    font-size: 16px;
  }
  .brewery-control-panel .vessels-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .brewery-control-panel .vessel-card {
    padding: 16px;
    border-radius: 12px;
  }
  .brewery-control-panel .vessel-card .vessel-header {
    margin-bottom: 16px;
  }
  .brewery-control-panel .vessel-card .vessel-header .vessel-name {
    font-size: 18px;
  }
  .brewery-control-panel .vessel-card .vessel-header .vessel-status {
    gap: 8px;
  }
  .brewery-control-panel .vessel-card .vessel-header .vessel-status .power-toggle-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
  .brewery-control-panel .vessel-card .vessel-header .vessel-status .status-text {
    font-size: 11px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics .metric-item .metric-label {
    font-size: 10px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics .metric-item .metric-value {
    font-size: 20px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics .metric-item .metric-value .metric-unit {
    font-size: 12px;
  }
  .brewery-control-panel .vessel-card .power-section {
    padding: 12px;
    margin-bottom: 16px;
  }
  .brewery-control-panel .vessel-card .power-section .power-header {
    margin-bottom: 10px;
  }
  .brewery-control-panel .vessel-card .power-section .power-header .power-label {
    font-size: 11px;
  }
  .brewery-control-panel .vessel-card .power-section .power-header .power-display {
    font-size: 18px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern {
    gap: 8px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-decrement,
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-increment {
    width: 36px;
    height: 36px;
    font-size: 20px;
    min-width: 36px;
    touch-action: manipulation;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-slider-container .power-range {
    height: 10px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-slider-container .power-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-slider-container .power-steps {
    top: 18px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-slider-container .power-steps .power-step-mark {
    font-size: 9px;
  }
  .brewery-control-panel .vessel-card .agitators-section {
    gap: 10px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item {
    padding: 10px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-header {
    margin-bottom: 6px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-header .agitator-label {
    font-size: 11px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power {
    gap: 10px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-value-small {
    font-size: 14px;
    min-width: 40px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-slider-small {
    height: 8px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-slider-small::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
  }
  .brewery-control-panel .vessel-card .agitators-section .agitator-item .agitator-power .power-slider-small::-moz-range-thumb {
    width: 18px;
    height: 18px;
  }
  .brewery-control-panel .pump-control {
    padding: 16px;
    border-radius: 12px;
  }
  .brewery-control-panel .pump-control .control-item .control-header-item {
    margin-bottom: 10px;
  }
  .brewery-control-panel .pump-control .control-item .control-header-item .control-label {
    font-size: 15px;
  }
  .brewery-control-panel .pump-control .control-item .power-control-compact {
    gap: 12px;
  }
  .brewery-control-panel .pump-control .control-item .power-control-compact .power-value {
    font-size: 18px;
    min-width: 50px;
  }
  .brewery-control-panel .pump-control .control-item .power-control-compact .power-slider {
    height: 10px;
  }
  .brewery-control-panel .pump-control .control-item .power-control-compact .power-slider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  .brewery-control-panel .pump-control .control-item .power-control-compact .power-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
  .brewery-control-panel .automatic-controls .program-section {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-header h3 {
    font-size: 18px;
    width: 100%;
  }
  .brewery-control-panel .automatic-controls .program-section .program-header .start-btn {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container {
    gap: 10px;
    margin-bottom: 16px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card {
    padding: 12px;
    border-radius: 10px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header {
    gap: 12px;
    margin-bottom: 10px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact {
    padding: 6px 8px;
    gap: 8px;
    font-size: 11px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-number-compact {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card-compact .step-temp-compact {
    font-size: 12px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-section .step-header .step-info {
    flex-direction: column;
    gap: 4px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-section .step-header .step-info .step-temp {
    font-size: 16px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-section .step-header .step-info .step-duration {
    font-size: 12px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-section .step-progress {
    margin-top: 10px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-section .step-progress .progress-track {
    height: 6px;
    margin-bottom: 6px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-section .step-progress .step-time-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 10px;
  }
  .brewery-control-panel .automatic-controls .program-section .program-section .step-progress .step-time-info .progress-text {
    font-size: 11px;
  }
  .brewery-control-panel .automatic-controls .overall-progress-section {
    padding: 16px;
    margin-bottom: 16px;
  }
  .brewery-control-panel .automatic-controls .overall-progress-section .overall-progress-header .progress-label {
    font-size: 12px;
  }
  .brewery-control-panel .automatic-controls .overall-progress-section .overall-progress-header .progress-percentage {
    font-size: 20px;
  }
  .brewery-control-panel .automatic-controls .overall-progress-section .overall-time-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
  }
  .brewery-control-panel .automatic-controls .status-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .brewery-control-panel .automatic-controls .status-grid .status-item {
    padding: 12px;
  }
  .brewery-control-panel .automatic-controls .status-grid .status-item .status-label {
    font-size: 10px;
  }
  .brewery-control-panel .automatic-controls .status-grid .status-item .status-value {
    font-size: 18px;
  }
  .brewery-control-panel .electricity-panel {
    padding: 16px;
    border-radius: 12px;
  }
  .brewery-control-panel .electricity-panel .electricity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .brewery-control-panel .electricity-panel .electricity-header .electricity-title {
    font-size: 16px;
    width: 100%;
  }
  .brewery-control-panel .electricity-panel .electricity-header .total-power {
    align-items: flex-start;
    width: 100%;
  }
  .brewery-control-panel .electricity-panel .electricity-header .total-power .total-power-value {
    font-size: 24px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card {
    padding: 12px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-header .phase-label {
    font-size: 13px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics {
    gap: 10px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric {
    padding: 6px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric .metric-icon {
    font-size: 18px;
    width: 20px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric .metric-content .metric-label-small {
    font-size: 9px;
  }
  .brewery-control-panel .electricity-panel .electricity-phases .phase-card .phase-metrics .phase-metric .metric-content .metric-value-small {
    font-size: 14px;
  }
  .emergency-section {
    margin-top: 24px;
    padding-top: 20px;
  }
  .emergency-section .emergency-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
    border-radius: 10px;
    flex-direction: row;
    justify-content: center;
  }
  .emergency-section .emergency-btn .emergency-icon {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .brewery-control-panel {
    padding: 12px;
  }
  .brewery-control-panel .control-header .panel-title {
    font-size: 20px;
  }
  .brewery-control-panel .vessel-card {
    padding: 12px;
  }
  .brewery-control-panel .vessel-card .vessel-header .vessel-name {
    font-size: 16px;
  }
  .brewery-control-panel .vessel-card .vessel-metrics .metric-value {
    font-size: 18px;
  }
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-decrement,
  .brewery-control-panel .vessel-card .power-section .power-control-modern .power-increment {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .brewery-control-panel .automatic-controls .program-section {
    padding: 12px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card {
    padding: 10px;
  }
  .brewery-control-panel .automatic-controls .program-section .steps-container .step-card .step-header .step-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}
.modal .settings-content {
  padding: 1rem 0;
  background: #1a1f2e;
  color: #ffffff;
}
.modal .settings-content .settings-section {
  margin-bottom: 2rem;
}
.modal .settings-content .settings-section .settings-section-title {
  color: #e0e7ff;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}
.modal .settings-content .settings-section .power-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal .settings-content .settings-section .power-section:last-child {
  margin-bottom: 0;
}
.modal .settings-content .settings-section .power-section .power-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.modal .settings-content .settings-section .power-section .power-header .power-label {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e7ff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal .settings-content .settings-section .power-section .power-header .power-display {
  font-size: 1.125rem;
  font-weight: 700;
  color: #a78bfa;
  padding: 0.25rem 0.75rem;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.modal .settings-content .settings-section .power-section .power-control-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-decrement,
.modal .settings-content .settings-section .power-section .power-control-modern .power-increment {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #e0e7ff;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-decrement:hover,
.modal .settings-content .settings-section .power-section .power-control-modern .power-increment:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
  transform: scale(1.05);
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-decrement:active,
.modal .settings-content .settings-section .power-section .power-control-modern .power-increment:active {
  transform: scale(0.95);
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container {
  flex: 1;
  position: relative;
  padding: 1.5rem 0 0.5rem;
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s ease;
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s ease;
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.5) 50%, rgba(139, 92, 246, 0.7) 100%);
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-moz-range-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.5) 50%, rgba(139, 92, 246, 0.7) 100%);
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 0.5rem;
}
.modal .settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-steps .power-step-mark {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.modal .settings-content .settings-section .setting-description {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}
.modal .settings-content .settings-section .steps-editor {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal .settings-content .settings-section .steps-editor .steps-list {
  margin-bottom: 2rem;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item:last-child {
  margin-bottom: 0;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-fields .step-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-fields .step-field label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-fields .step-field .step-input {
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-fields .step-field .step-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-fields .step-field .step-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-actions .step-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  color: #e0e7ff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-actions .step-action-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
  transform: scale(1.1);
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-actions .step-action-btn:active {
  transform: scale(0.95);
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-actions .step-action-btn.delete {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.modal .settings-content .settings-section .steps-editor .steps-list .step-editor-item .step-actions .step-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}
.modal .settings-content .settings-section .steps-editor .no-steps-message {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  margin-bottom: 2rem;
}
.modal .settings-content .settings-section .steps-editor .add-step-section {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-title {
  color: #e0e7ff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto;
  gap: 1rem;
  align-items: end;
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .step-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .step-field label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .step-field .step-input {
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .step-field .step-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .step-field .step-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .add-step-btn {
  padding: 0.5rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  height: fit-content;
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .add-step-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .add-step-btn:active:not(:disabled) {
  transform: translateY(0);
}
.modal .settings-content .settings-section .steps-editor .add-step-section .add-step-form .add-step-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal .modal-content {
  background: #1a1f2e;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
}
.modal .modal-header {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.modal .modal-header .modal-title {
  color: #ffffff;
  font-weight: 600;
}
.modal .modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
}
.modal .modal-header .btn-close:hover {
  opacity: 1;
}
.modal .modal-body {
  background: #1a1f2e;
  color: #ffffff;
}
.modal .modal-footer {
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.chart-btn .chart-icon {
  font-size: 18px;
}
.chart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
.chart-btn:active {
  transform: translateY(0);
}

.chart-content {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.95) 100%);
  border-radius: 12px;
  min-height: 400px;
}
.chart-content .chart-wrapper {
  background: rgba(17, 24, 39, 0.8) !important;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid rgba(102, 126, 234, 0.2);
}
.chart-content .chart-wrapper * {
  background: transparent !important;
}
.chart-content .chart-wrapper {
  background: rgba(17, 24, 39, 0.8) !important;
}
.chart-content .chart-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(17, 24, 39, 0.8) !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(102, 126, 234, 0.2);
}
.chart-content .chart-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(102, 126, 234, 0.15) !important;
  border-radius: 8px;
  border-left: 3px solid #667eea;
}
.chart-content .chart-stats .stat-item .stat-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chart-content .chart-stats .stat-item .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #667eea !important;
}
.chart-content .no-data-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 2rem;
  border: 1px solid rgba(102, 126, 234, 0.2);
}
.chart-content .no-data-message p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin: 0;
}

@media (max-width: 768px) {
  .chart-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  .chart-btn span:not(.chart-icon) {
    display: none;
  }
  .chart-btn .chart-icon {
    font-size: 20px;
  }
  .chart-content .chart-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .chart-content .chart-stats .stat-item {
    padding: 0.5rem;
  }
  .chart-content .chart-stats .stat-item .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .chart-content .chart-stats .stat-item .stat-value {
    font-size: 16px;
    color: #667eea !important;
  }
}
@media (max-width: 480px) {
  .chart-content {
    padding: 0.5rem;
  }
  .chart-content .chart-stats {
    grid-template-columns: 1fr;
  }
}
.apexcharts-canvas,
.apexcharts-svg,
.apexcharts-inner,
.apexcharts-canvas > svg {
  background: transparent !important;
}

.apexcharts-svg > rect[fill="#ffffff"],
.apexcharts-svg > rect[fill=white],
.apexcharts-svg > rect[fill="rgb(255, 255, 255)"] {
  fill: transparent !important;
}

.apexcharts-gridline {
  stroke: rgba(255, 255, 255, 0.1) !important;
}

.apexcharts-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
  fill: #ffffff !important;
}

.apexcharts-title-text {
  fill: #ffffff !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

.apexcharts-legend-text {
  color: #ffffff !important;
}

.apexcharts-tooltip {
  background: rgba(17, 24, 39, 0.95) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  color: #ffffff !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
  background: rgba(102, 126, 234, 0.2) !important;
  border-bottom: 1px solid rgba(102, 126, 234, 0.3) !important;
  color: #ffffff !important;
}
.apexcharts-tooltip .apexcharts-tooltip-text-y-label,
.apexcharts-tooltip .apexcharts-tooltip-text-y-value {
  color: #ffffff !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: rgba(17, 24, 39, 0.95) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  color: #ffffff !important;
}
.apexcharts-xaxistooltip:before, .apexcharts-xaxistooltip:after,
.apexcharts-yaxistooltip:before,
.apexcharts-yaxistooltip:after {
  border-bottom-color: rgba(102, 126, 234, 0.3) !important;
}

.apexcharts-theme-dark .apexcharts-canvas,
.apexcharts-theme-dark .apexcharts-svg {
  background: transparent !important;
}

div[class*=apexcharts] {
  background: transparent !important;
}

foreignObject,
foreignObject > div {
  background: transparent !important;
}

.apexcharts-line-series .apexcharts-series path {
  stroke: #667eea !important;
  stroke-width: 3px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  opacity: 1 !important;
  vector-effect: non-scaling-stroke !important;
}

.apexcharts-line,
.apexcharts-series[seriesName="Temperature(°C)"] path,
.apexcharts-series path[stroke],
.apexcharts-series path {
  stroke: #667eea !important;
  stroke-width: 3px !important;
  fill: none !important;
  opacity: 1 !important;
  vector-effect: non-scaling-stroke !important;
}

.apexcharts-graphical {
  opacity: 1 !important;
}

.apexcharts-series path,
.apexcharts-series line {
  opacity: 1 !important;
  stroke: #667eea !important;
  stroke-width: 3px !important;
}

svg .apexcharts-series path,
svg path.apexcharts-line,
svg .apexcharts-line-series path {
  stroke: #667eea !important;
  stroke-width: 3px !important;
  fill: none !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

.apexcharts-marker {
  display: none !important;
}

circle.apexcharts-marker {
  display: none !important;
}

.apexcharts-xaxis-label {
  text-anchor: end !important;
}

.apexcharts-xaxis {
  transform: translateY(0) !important;
}

.apexcharts-xaxis-texts-g text {
  fill: #ffffff !important;
  font-size: 11px !important;
}

body:has(.auth-container) .sidebar {
  display: none !important;
}
body:has(.auth-container) main {
  width: 100% !important;
  margin-left: 0 !important;
}
body:has(.auth-container) .page {
  display: block !important;
}

.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  width: 100%;
  box-sizing: border-box;
}
.auth-container .auth-card {
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.auth-container .auth-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.4);
}
.auth-container .auth-card .auth-header {
  text-align: center;
  margin-bottom: 32px;
}
.auth-container .auth-card .auth-header .auth-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}
.auth-container .auth-card .auth-header .auth-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.auth-container .auth-card .auth-form .form-group {
  margin-bottom: 24px;
}
.auth-container .auth-card .auth-form .form-group .form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-container .auth-card .auth-form .form-group .form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.auth-container .auth-card .auth-form .form-group .form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.auth-container .auth-card .auth-form .form-group .form-input:focus {
  outline: none;
  border-color: #667eea;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.auth-container .auth-card .auth-form .form-group .form-input:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
}
.auth-container .auth-card .auth-form .form-group .form-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #ef4444;
}
.auth-container .auth-card .auth-form .form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.auth-container .auth-card .auth-form .form-options .checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-container .auth-card .auth-form .form-options .checkbox-wrapper .form-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
}
.auth-container .auth-card .auth-form .form-options .checkbox-wrapper .form-checkbox-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  user-select: none;
}
.auth-container .auth-card .auth-form .form-options .auth-link {
  font-size: 14px;
  color: #667eea;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
}
.auth-container .auth-card .auth-form .form-options .auth-link:hover {
  color: #764ba2;
  text-decoration: underline;
}
.auth-container .auth-card .auth-form .auth-error-summary {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  color: #ef4444;
  font-size: 14px;
}
.auth-container .auth-card .auth-form .auth-error-summary ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: none;
}
.auth-container .auth-card .auth-form .auth-error-summary ul li {
  margin-bottom: 4px;
}
.auth-container .auth-card .auth-form .auth-error-summary ul li:last-child {
  margin-bottom: 0;
}
.auth-container .auth-card .auth-form .auth-button {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-container .auth-card .auth-form .auth-button span {
  display: inline-block;
}
.auth-container .auth-card .auth-form .auth-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
.auth-container .auth-card .auth-form .auth-button:active {
  transform: translateY(0);
}
.auth-container .auth-card .auth-form .auth-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.auth-container .auth-card .auth-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.auth-container .auth-card .auth-footer .auth-footer-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.auth-container .auth-card .auth-footer .auth-footer-text .auth-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}
.auth-container .auth-card .auth-footer .auth-footer-text .auth-link:hover {
  color: #764ba2;
  text-decoration: underline;
}
.auth-container .auth-card .confirmation-message {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
}
.auth-container .auth-card .confirmation-message .confirmation-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 1024px) and (min-width: 768px) {
  .auth-container {
    padding: 20px;
  }
  .auth-container .auth-card {
    padding: 32px;
    max-width: 440px;
  }
  .auth-container .auth-card .auth-header .auth-title {
    font-size: 28px;
  }
  .auth-container .auth-card .auth-header .auth-subtitle {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .auth-container {
    padding: 16px;
  }
  .auth-container .auth-card {
    padding: 24px;
    border-radius: 16px;
  }
  .auth-container .auth-card .auth-header {
    margin-bottom: 24px;
  }
  .auth-container .auth-card .auth-header .auth-title {
    font-size: 24px;
  }
  .auth-container .auth-card .auth-header .auth-subtitle {
    font-size: 14px;
  }
  .auth-container .auth-card .auth-form .form-group {
    margin-bottom: 20px;
  }
  .auth-container .auth-card .auth-form .form-group .form-label {
    font-size: 13px;
  }
  .auth-container .auth-card .auth-form .form-group .form-input {
    padding: 12px 14px;
    font-size: 15px;
  }
  .auth-container .auth-card .auth-form .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  .auth-container .auth-card .auth-form .auth-button {
    padding: 14px 20px;
    font-size: 15px;
  }
  .auth-container .auth-card .auth-footer {
    margin-top: 24px;
    padding-top: 20px;
  }
  .auth-container .auth-card .auth-footer .auth-footer-text {
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .auth-container {
    padding: 12px;
  }
  .auth-container .auth-card {
    padding: 20px;
  }
  .auth-container .auth-card .auth-header .auth-title {
    font-size: 22px;
  }
}
.dropdown-input {
  position: relative;
  font-family: Poppins;
  width: 100%;
  margin-bottom: 10px;
}
.dropdown-input .dropdown-input select {
  width: 100%;
}
.dropdown-input .dropdown-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  border-bottom: 5px solid transparent;
  top: 45%;
  right: 5%;
  pointer-events: none;
}
.dropdown-input .dropdown-arrow.active {
  /*border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  border-top: 5px solid transparent;
  border-bottom: 5px solid white;
  top: 33%;
}

.float-select {
  width: -moz-available;
  width: -webkit-fill-available;
  max-width: -moz-available;
  max-width: -webkit-fill-available;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.float-select:hover {
  cursor: pointer;
}

.select-selected {
  width: 100%;
  background: var(--primary-background-color);
  border: 1px solid var(--secondary-color);
  box-sizing: border-box;
  border-radius: 4px;
  color: var(--tertiary-text-color);
  font-size: 16px;
  padding: 4px 10px;
  height: 40px;
}
.select-selected.select-arrow-active {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.select-selected.select-arrow-active::after {
  border-color: transparent transparent var(--primary-text-color) transparent;
  top: 7px;
}
.select-selected::after {
  position: absolute;
  content: "";
  top: 20px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--primary-text-color) transparent transparent transparent;
  opacity: 0.8;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
  width: 100%;
  background: transparent;
  border: 1px solid var(--primary-border-color);
  box-sizing: border-box;
  color: var(--primary-text-color);
  font-size: 16px;
  padding: 4px 10px;
  height: 40px;
  cursor: pointer;
  line-height: 32px;
}

.select-items div:last-child {
  border-bottom: none;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: var(--primary-content-background-color);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-bottom: 1px solid var(--primary-border-color);
  border-radius: 0 0 4px 4px;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover,
.select-items div.active,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.selector-wrapper {
  align-content: flex-end;
  border-top: solid 2px var(--primary-color);
  padding: 10px 15px;
  display: flow-root;
}

.float-selector-label {
  font-size: 16px;
  position: absolute;
  transform-origin: top left;
  transform: translate(0, -10px) scale(0.75);
  color: var(--tertiary-text-color);
  user-select: none;
  cursor: pointer;
  pointer-events: none;
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
  background-color: var(--primary-content-background-color);
  margin-left: 8px;
}

.basic-input, .recipe-detail-wrapper .info-card .recipe-name {
  color: var(--primary-text-color);
  background-color: transparent;
  border: 1px solid var(--primary-border-color);
  border-radius: 5px;
  margin-bottom: 10px;
}
.basic-input:focus, .recipe-detail-wrapper .info-card .recipe-name:focus {
  background-color: transparent;
  border-color: #00995c;
  color: var(--primary-text-color);
  box-shadow: unset;
}
.basic-input:hover, .recipe-detail-wrapper .info-card .recipe-name:hover {
  cursor: pointer;
}

.float-container {
  position: relative;
  padding: 0 0px;
  margin-bottom: 10px;
  width: 100%;
  color: var(--tertiary-text-color);
  /*margin-top: 20px;*/
}
.float-container .float-error {
  color: var(--secondary-warning-color);
  margin-top: 5px;
}
.float-container .float-error a {
  color: inherit;
  text-decoration: underline;
}
.float-container.table-search {
  height: 30px;
  width: 200px;
  margin-top: 15px;
  display: flex;
  margin: 0;
  font-weight: lighter;
  /*    @else {
          @error 'No value found for `medium`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
  /*    @else {
          @error 'No value found for `tiny`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 750px) {
  .float-container.table-search {
    width: 180px;
  }
}
@media only screen and (max-width: 660px) {
  .float-container.table-search {
    width: 150px;
  }
}
@media only screen and (max-width: 550px) {
  .float-container.table-search {
    width: 120px;
  }
}
.float-container.table-search .float-label-search {
  top: 1px;
}
.float-container.table-search .float-input {
  height: 100%;
  padding: 6px 13px;
}
.float-container .tooltip-wrapper {
  display: inline-flex;
  position: absolute;
  transform-origin: top left;
  transform: translate(5px, -10px) scale(1);
  z-index: 1;
}
.float-container .tooltip-wrapper .tooltip-placeholder {
  font-size: 12px;
  background-color: var(--primary-content-background-color);
  padding-left: 10px;
  padding-right: 10px;
}
.float-container .tooltip-wrapper .tooltip-container-float {
  position: relative;
  line-height: 12px;
  margin-left: -5px;
}
.float-container .tooltip-wrapper .tooltip-container-float .explanation-btn {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  font-size: 12px;
  box-shadow: none;
  padding: 0;
  background-color: var(--secondary-separator-color);
  color: var(--primary-text-color);
}
.float-container .float-input, .float-container .float-textarea {
  font-size: 16px;
  outline: 0;
  padding: 10px 13px 5px 13px;
  width: inherit;
  background-color: transparent;
  color: var(--primary-text-color);
  border: 1px solid var(--primary-border-color);
  border-radius: 4px;
  height: 42px;
  font-weight: lighter;
}
.float-container .float-input.green-text, .float-container .float-textarea.green-text {
  color: var(--primary-color);
}
.float-container .float-textarea {
  resize: vertical;
  min-height: 41px;
  height: 40px;
  vertical-align: bottom;
  color: var(--primary-text-color);
}
.float-container .float-textarea.big {
  height: 400px;
}
.float-container .float-label, .float-container .float-label-search {
  font-size: 16px;
  position: absolute;
  transform-origin: top left;
  /*transform: translate(0, 8px) scale(1);*/
  transition: all 0.1s ease-in-out;
  user-select: none;
  cursor: text;
  pointer-events: none;
  width: auto;
  padding-left: 5px;
  margin-left: 8px;
  z-index: 1;
}
.float-container .float-label {
  transform: translate(0, 8px) scale(1);
}
.float-container .float-label-search {
  transform: translate(0, 2px) scale(1);
}
.float-container .input-button {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translate(0, -50%);
}
.float-container .btn-show-password {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  filter: var(--tertiary-filter-color);
  width: 25px;
  background-size: 20px;
  height: 40px;
  box-shadow: none;
  background-color: transparent;
  position: absolute;
  top: 1px;
  right: 10px;
  cursor: pointer;
}
.float-container .btn-show-password:hover {
  filter: var(--primary-filter-color);
}
.float-container .btn-show-password.active {
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.float-container.active .float-label {
  transform: translate(0, -10px) scale(0.75);
  background-color: var(--primary-content-background-color);
  padding-left: 5px;
  padding-right: 5px;
}
.float-container.active .float-label-search {
  transform: translate(0, -10px) scale(0.75);
  background-color: var(--primary-content-background-color);
  padding-left: 5px;
  padding-right: 5px;
}
.float-container .search-button {
  width: 28px;
  height: 28px;
  background-color: transparent;
  box-shadow: none;
}
.float-container .search-button::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: " ";
  background-color: transparent;
  background-repeat: no-repeat;
  filter: var(--secondary-filter-color);
  background-position: center;
  background-size: 20px;
  box-shadow: none;
}
.float-container.active .search-button::after {
  filter: none;
}
.float-container.active .search-button::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: " ";
  background-color: var(--primary-color);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.float-container .clear-button {
  width: 28px;
  height: 28px;
  background-color: transparent;
  background-repeat: no-repeat;
  filter: var(--secondary-filter-color);
  background-position: center;
  background-size: 20px;
  box-shadow: none;
}
.float-container .switch-input {
  line-height: 42px;
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid var(--primary-border-color);
  border-radius: 4px;
  height: 42px;
}
.float-container .switch-input .switch-text {
  color: var(--primary-text-color);
  width: 87%;
}
.float-container .color-select {
  line-height: 42px;
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid var(--primary-border-color);
  border-radius: 4px;
  height: 42px;
}
.float-container .color-select:hover {
  cursor: pointer;
}
.float-container .color-select .switch-text {
  color: var(--primary-text-color);
  width: 87%;
}
.float-container .color-select .color-avatar {
  /*height: 20px;
  width: 20px;*/
  height: 12px;
  width: 45px;
  position: relative;
  top: 40%;
  left: 0%;
  border-radius: 10px;
}

.modal-content {
  background-color: #292929 !important;
}

.comgate-iframe {
  width: 521px;
  height: calc(100vh - 90px);
  border: none;
}

.blazored-modal {
  background-color: var(--primary-content-background-color) !important;
  padding: 20px;
  /*background-color: var(--primary-content-background-color);*/
  border-radius: 6px;
  position: relative;
  /*width: auto;*/
  width: 75%;
  /*max-width: calc(100vw - 6px);*/
  max-width: 1024px;
  max-height: calc(100vh - 60px);
  border: none;
  overflow: auto;
  padding-bottom: 10px;
  padding-top: 0px;
  /*    @else {
          @error 'No value found for `tiny`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 550px) {
  .blazored-modal {
    width: 100%;
  }
}
.blazored-modal.modal-dialog {
  width: auto;
  z-index: 9999;
}
.blazored-modal.modal-pdf {
  width: 100%;
  height: 100%;
  background-color: transparent !important;
}
.blazored-modal.modal-pdf .blazored-modal-content {
  height: 100%;
}
.blazored-modal.modal-comgate {
  width: auto;
  height: auto;
  background-color: transparent !important;
}

.blazored-modal-title {
  width: auto;
  height: 25px;
  line-height: 25px;
}

.blazored-modal-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.popup-standard-width {
  width: 1024px;
}

.popup-invoice-preview {
  width: 100%;
  height: 100%;
  /*@include respond-to('large') {
      width: 750px;*/
  /*width: 100%;*/
  /*}

  @include respond-to('medium') {
      width: 600px*/
  /*width: 100%;*/
  /*}

  @include respond-to('small') {
      width: 500px;*/
  /*width: 100%;*/
  /*}

  @include respond-to('tiny') {
      width: 320px;*/
  /*width: 100%;*/
  /*}*/
}
.popup-invoice-preview .invoice-embed {
  width: inherit;
  height: inherit;
}

.blazored-modal-header {
  padding-bottom: 0px;
  padding-top: 10px;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: var(--primary-content-background-color);
}

.blazored-modal-close {
  box-shadow: none;
  padding-bottom: 0px;
  padding-top: 0px;
  color: var(--primary-text-color);
  margin: -1rem 0rem -1rem auto;
}

.popup-overlay {
  position: absolute;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
}
.popup-overlay.open {
  display: flex;
}
.popup-overlay .popup-holder {
  padding: 40px;
  background-color: var(--primary-content-background-color);
  border-radius: 6px;
  position: relative;
  width: 1024px;
  max-width: calc(100vw - 60px);
  max-height: calc(100vh - 60px);
}
.popup-overlay .popup-holder .content {
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 140px);
  overflow: auto;
}
.popup-overlay .popup-holder .close {
  position: absolute;
  top: 15px;
  right: 16px;
  cursor: pointer;
  width: 18px;
  height: 16px;
  padding-left: 5px;
}
.popup-overlay .popup-holder .close:before, .popup-overlay .popup-holder .close:after {
  content: "";
  display: inline-block;
  height: 20px;
  width: 4px;
  background-color: var(--primary-text-color);
  border-radius: 4px;
  position: relative;
}
.popup-overlay .popup-holder .close:before {
  transform: rotate(-45deg) translateX(3px);
}
.popup-overlay .popup-holder .close:after {
  transform: rotate(45deg) translateX(-3px);
}

.popup-wrapper {
  max-width: 600px;
  min-width: 460px;
  /*    @else {
          @error 'No value found for `tiny`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 550px) {
  .popup-wrapper {
    min-width: auto;
  }
}
.popup-wrapper .popup-dialog-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.popup-wrapper .popup-dialog-btn-wrapper .popup-button {
  margin-bottom: 0px;
  padding: 10px 45px 10px 20px;
}
.popup-wrapper .popup-dialog-btn-wrapper .popup-button:hover {
  padding: 8px 43px 8px 18px !important;
}

.terms_wrapper {
  /*    max-width: 1024px;
      margin: 0 auto;
      padding: 20px 10px;*/
}
.terms_wrapper .terms_chapter {
  padding-right: 20px;
  /*    @else {
          @error 'No value found for `medium`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 750px) {
  .terms_wrapper .terms_chapter {
    padding-left: 20px;
  }
}

/* / POPUP */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
input[type=range] {
  color: #E84363;
  --thumb-height: 1.525em;
  --track-height: 0.525em;
  --track-color: rgba(0, 0, 0, 0.2);
  --brightness-hover: 180%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
  position: relative;
  background: rgba(255, 255, 255, 0);
  overflow: hidden;
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: stretch;
}
input[type=range]:active {
  cursor: grabbing;
}
input[type=range]:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}
input[type=range]:active::-moz-range-thumb {
  cursor: grabbing;
  filter: brightness(var(--brightness-down));
}
input[type=range]:active::-moz-range-progress {
  filter: brightness(var(--brightness-down));
}
input[type=range]:disabled {
  filter: grayscale(1);
  opacity: 0.3;
  cursor: not-allowed;
}
input[type=range]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
input[type=range]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}
input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
  position: relative;
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height) + 1px);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
  position: relative;
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center/50% calc(var(--track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));
  filter: brightness(100%);
  clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
}
input[type=range]:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}
input[type=range]:hover::-moz-range-thumb {
  filter: brightness(var(--brightness-hover));
}
input[type=range]:hover::-moz-range-progress {
  filter: brightness(var(--brightness-hover));
}
input[type=range]::-moz-range-track {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
  background: rgba(255, 255, 255, 0);
  width: 100%;
  background: var(--track-color);
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}
input[type=range]::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
  background: rgba(255, 255, 255, 0);
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
  filter: brightness(100%);
}
input[type=range]::-moz-range-progress {
  background: rgba(255, 255, 255, 0);
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
  filter: brightness(100%);
}

.selected-value {
  background-image: url("/img/ico-chevron.svg");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  padding: 5px 10px;
  border: 1px solid #e0e1e1;
  border-radius: 4px;
  /*margin-top: 20px;*/
}
.selected-value:hover {
  cursor: pointer;
}

.select-wrapper {
  /*background-color: #272942;*/
  border-radius: 4px;
  border: 1px solid #e0e1e1;
  position: absolute;
  z-index: 9999;
  width: inherit;
  background-color: #292929;
}
.select-wrapper .select-option {
  padding: 5px 10px;
}
.select-wrapper .select-option.selected {
  color: #e84363;
}
.select-wrapper .select-option:hover {
  cursor: pointer;
  /*background-color: #272942;*/
  /*background-image: linear-gradient(to left, #272942, #2d2f44);*/
  /*background: linear-gradient(to left, #272942, #272942 50%, #eee 75%, #333 75%);*/
  background-color: #252525;
}

.selectdiv {
  position: relative;
  width: auto;
}

select::-ms-expand {
  display: none;
}

.selectdiv:after {
  content: "<>";
  font: 17px "Consolas", monospace;
  color: var(--text-color);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  top: 11px;
  padding: 0 0 2px;
  border-bottom: 1px solid var(--text-color);
  position: absolute;
  pointer-events: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 35px;
  float: right;
  margin: 5px 0px;
  padding: 0px 8px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-color);
  background-color: transparent;
  background-image: none;
  border: 1px solid #E84363;
  -ms-word-break: normal;
  word-break: normal;
}
.selectdiv select option {
  background-color: #1c1d2a;
  color: var(--text-color);
}

.items-separator {
  opacity: 0.5;
  background-color: transparent;
  height: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
  border-top: 1px dashed var(--text-color);
}

.card-sections-separator {
  height: 1px;
  background-color: var(--text-color);
  margin-top: 10px;
  margin-bottom: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B20804;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
  width: 50px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #00B239;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider-description {
  margin-bottom: 0px;
  line-height: 30px !important;
  text-align: left;
  padding-left: 0px;
  padding-right: 0px;
  width: 125px;
}

.slider-box {
  display: flex;
  flex-direction: column;
}

.clock {
  color: var(--color-tone-1);
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
}

.table-box {
  /*margin-top: -4px;*/
  overflow: auto;
  width: 100%;
  height: 100%;
}
.table-box .clickable {
  background-color: transparent;
}
.table-box .clickable:hover {
  cursor: pointer;
  background-color: #3e3f42 !important;
}
.table-box .clickable:hover td {
  background-color: #3e3f42 !important;
}
.table-box .separator {
  background-color: #595b5f !important;
  height: 1px;
  min-height: 2px;
  border: unset;
}
.table-box .separator td {
  border: none;
  border-radius: 0;
}

table {
  height: 100%;
  /*width: 100%;*/
  width: auto;
  border-collapse: separate;
  border-spacing: 0px 4px;
  font-weight: lighter;
}
table.fixed-layout {
  table-layout: fixed;
  min-width: max-content;
}

table thead tr {
  background: var(--primary-thead-background-color);
}

table thead {
  height: 40px;
}

table tr {
  height: 40px;
  border-bottom: solid 1px var(--secondary-separator-color);
}

tbody .separator {
  height: 1px;
  background-color: #595b5f;
}

.tile-table tr {
  /*    &.clickable {
          cursor: pointer;

          &.last-visited {

              td {
                  background-color: var(--primary-visited-color);
              }
          }

          &:hover {

              td {
                  background-color: var(--tertiary-hover-color);
              }
          }

          tr {
              background-color: #292929;
          }
      }
  */
}
.tile-table tr td:first-child {
  border-left: solid 4px var(--primary-content-background-color);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 660px) {
  .tile-table tr td:first-child {
    border-left: solid 0px var(--primary-content-background-color);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
}
.tile-table tr td:last-child {
  border-right: solid 4px var(--primary-content-background-color);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 660px) {
  .tile-table tr td:last-child {
    border-right: solid 0px var(--primary-content-background-color);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}
.tile-table tr.separator {
  height: 1px;
  background-color: #595b5f;
}
.tile-table tr.separator td {
  border: none;
  border-radius: 0;
}

.filter-title {
  display: inline-block;
  padding-right: 5px;
  cursor: pointer;
  user-select: none;
}
.filter-title.active {
  color: var(--primary-color);
}
.filter-title .filter-arrow-box {
  display: inline-block;
  height: 100%;
  width: 10px;
  position: relative;
}
.filter-title .filter-arrow-box .filter-arrow {
  display: inline-block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /*background: url("../Styles/img/arrow-down.svg") 50% 50% no-repeat;*/
  position: absolute;
  width: 10px;
  height: 10px;
  left: 4px;
  filter: invert(66%) sepia(0%) saturate(1114%) hue-rotate(287deg) brightness(80%) contrast(93%);
}
.filter-title .filter-arrow-box .filter-arrow.down {
  top: calc(50% - 6px);
}
.filter-title .filter-arrow-box .filter-arrow.up {
  top: calc(50% - 14px);
  transform: rotate(180deg);
}
.filter-title .filter-arrow-box .filter-arrow.active {
  filter: invert(50%) sepia(4%) saturate(5702%) hue-rotate(120deg) brightness(112%) contrast(66%);
}

table tr td {
  box-sizing: content-box;
}

table tr td {
  padding: 0 16px;
}

table tr:last-child {
  border-bottom: none;
}

.tax-border tr:nth-last-child(2) {
  border-color: var(--secondary-color);
}

table tr > div {
  width: 100%;
  height: 100%;
  margin: 2px;
  background-color: var(--primary-color);
}

.pl-select {
  text-align: center;
  width: 30px;
  min-width: 30px;
  /*    @else {
          @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 660px) {
  .pl-select {
    padding: 5px;
  }
}

.pl-name {
  /*min-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: $table-font-size;
  width: max-content;*/
  /*width: 100%;*/
  width: auto;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  padding-left: 10px;
  /*    @include respond-to('small') {
          padding-left: 0px;
          padding-right: 0px;
      }*/
}

.pl-id {
  text-align: left;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}
.pl-id.log {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
}

.pl-date {
  text-align: left;
  width: 142px;
  min-width: 142px;
  max-width: 142px;
}

.pl-unit, .pl-price {
  text-align: right;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  font-size: 14px;
}

.pl-email {
  width: 150px;
  max-width: 150px;
  min-width: 150px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-email.width-auto {
  width: auto;
  max-width: inherit;
}

.pl-phone-number {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  text-align: right;
  font-size: 14px;
}

.pl-tax {
  text-align: right;
  width: fit-content;
  font-size: 14px;
}

.pl-color, .pl-color-small {
  width: 5px;
  padding: 0px;
}
.pl-color .item-color, .pl-color-small .item-color {
  width: 5px;
  padding: 0px;
  border-radius: 5px;
  height: 30px;
}
.pl-color .item-color.color-small, .pl-color-small .item-color.color-small {
  position: relative;
  top: 50%;
  margin-top: -15px;
}

.pl-color-small {
  padding-right: 5px;
}

.pl-color-group {
  width: 20px;
}
.pl-color-group .item-color {
  width: 20px;
  padding: 0px;
  border-radius: 10px;
  height: 20px;
}

.pl-address {
  text-align: left;
  width: max-content;
  font-size: 14px;
  width: 200px;
  max-width: 200px;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-company-name {
  text-align: left;
  font-size: 14px;
  width: 150px;
  max-width: 150px;
  min-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-account-id {
  text-align: left;
  font-size: 14px;
  width: 330px;
  max-width: 330px;
  min-width: 330px;
}

.pl-plu, .pl-sku, .pl-ean {
  text-align: left;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-sku {
  /*   width: 102px;
     max-width: 102px;
     min-width: 102px;*/
}

.pl-operation {
  width: auto;
  max-width: 102px;
  min-width: auto;
}

.pl-description {
  width: auto;
  min-width: auto;
  max-width: 200px;
}

.pl-date {
  width: 160px;
  max-width: 160px;
  min-width: 160px;
}

.pl-plu {
  width: 45px;
  max-width: 45px;
  min-width: 45px;
}

.pl-ean {
  width: 120px;
  max-width: 120px;
  min-width: 120px;
}

.pl-batchnumber {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

.pl-og {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
}

.pl-quantity {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}

.pl-tax {
  text-align: left;
  font-size: 14px;
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-status {
  text-align: left;
  width: 150px;
  max-width: 150px;
  min-width: 150px;
  font-size: 14px;
}

.pl-buffer {
  text-align: center;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.pl-actions {
  text-align: center;
  width: auto;
  position: relative;
  height: 40px;
  right: 0px;
  display: flex;
  gap: 5px;
  /*    @include respond-to('small') {
      padding: 0px;
      padding-right: 5px;
  }*/
}
.pl-actions div {
  margin-top: auto !important;
  margin-bottom: auto !important;
  width: max-content !important;
}

.pl-small-link {
  text-decoration: underline;
  font-size: small;
  color: var(--secondary-separator-color);
}

.hide-vat {
  display: none;
}

.table-column-wrap {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-fill {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagination-holder {
  /*display: flex;*/
  display: flow-root;
  /*flex-direction: row;
  justify-content: space-between;*/
}

.pagination-counter {
  margin-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
  height: 28px;
}

.pagination-help-text {
  margin-bottom: 0px;
  padding-left: 0px;
  padding-right: 5px;
  height: 28px;
  /*    @else {
          @error 'No value found for `tiny`. ' + 'Please make sure it is defined in `$breakpoints` map.';
      }*/
}
@media only screen and (max-width: 550px) {
  .pagination-help-text {
    display: none;
  }
}

.pagination-pagesize-container {
  margin-bottom: 0px !important;
  width: auto !important;
}

.pagination-pagesize-input {
  line-height: 29px !important;
  width: 40px !important;
  height: 28px !important;
  font-size: 16px !important;
  padding: 0px !important;
  text-align: center !important;
  margin: 0px !important;
}

.pagination-info {
  /*align-self: flex-start;
  display: inline-flex;*/
  display: flex;
  float: left;
  /*float: inline-start;*/
  min-width: max-content;
  margin-bottom: 5px;
}

.pagination-box {
  height: 28px;
  /*display: flow-root;*/
  /*align-self: flex-end;*/
  display: flex;
  /*float: inline-end;*/
  float: right;
  min-width: max-content;
}

.page-selector {
  line-height: 29px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  float: left;
  user-select: none;
  color: var(--primary-text-color);
  text-align: center;
  border-radius: 3px;
  margin: 0 3px;
}
.page-selector.active {
  color: var(--secondary-text-color);
  background-color: var(--primary-color);
}
.page-selector:hover {
  /*border: solid 2px #b5d9d2;*/
  border: solid 2px var(--primary-add-button-hover-color);
  line-height: 25px;
  color: var(--primary-text-color);
}
.page-selector.inactive {
  filter: invert(99%) sepia(7%) saturate(51%) hue-rotate(252deg) brightness(114%) contrast(95%) !important;
}
.page-selector.inactive:hover {
  border-color: transparent;
}
.page-selector.previous, .page-selector.next {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 20px;
  filter: var(--primary-filter-color);
}
.paginator-arrow-div {
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 3px;
}
.paginator-arrow-div:hover {
  cursor: pointer;
  /*border: 2px solid white;*/
  border: 2px solid var(--primary-add-button-hover-color);
  border-radius: 3px;
}
.paginator-arrow-div.inactive {
  /*filter: invert(99%) sepia(7%) saturate(51%) hue-rotate(252deg) brightness(114%) contrast(95%) !important;*/
}
.paginator-arrow-div.inactive:hover {
  border-color: transparent;
}
.paginator-arrow-div .paginator-arrow {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 20px;
  filter: var(--primary-filter-color);
  width: 20px;
  height: 20px;
  display: block;
}
.paginator-arrow-div .paginator-arrow.inactive {
  filter: var(--tertiary-filter-color);
}

.table-bottom-border {
  border-bottom: solid 2px var(--primary-color);
}

.small-table-column {
  width: 50%;
  padding-top: 5px;
  /*    .status-container {
          border: 1px solid;
          border-radius: 15px;
          border-color: var(--primary-text-color);

          &.green {
              border-color: var(--primary-color);
          }

          &.red {
              border-color: var(--primary-warning-color)
          }

          .status-text {
              margin-bottom: 0px;
              margin-left: 5px;
              margin-right: 5px;
              color: var(--primary-text-color);

              &.green {
                  color: var(--primary-color);
              }

              &.red {
                  color: var(--primary-warning-color)
              }
          }
      }*/
}
.small-table-column.left-column {
  padding-left: 10px;
}
.small-table-column.right-column {
  padding-right: 10px;
  text-align: right;
}
.small-table-column .type-icon {
  background-repeat: no-repeat;
  width: 20px;
  margin-left: 5px;
}

.status-container {
  border: 1px solid;
  border-radius: 3px;
  border-color: var(--primary-text-color);
  width: max-content;
}
.status-container.green {
  border-color: var(--primary-color);
}
.status-container.red {
  border-color: var(--primary-warning-color);
}
.status-container .status-text {
  /*margin-bottom: 0px;
  margin-left: 5px;
  margin-right: 5px;*/
  margin: 0px 10px;
  font-size: 13px;
  color: var(--primary-text-color);
  letter-spacing: 0.5px;
}
.status-container .status-text.green {
  color: var(--primary-color);
}
.status-container .status-text.red {
  color: var(--primary-warning-color);
}

.small-table {
  display: grid;
  grid-template-columns: max-content max-content 40px;
  grid-template-rows: auto;
  /*column-gap: 15px;*/
  row-gap: 0px;
  background-color: #292929;
  /*padding: 10px;*/
  width: fit-content;
  border-radius: 4px;
  font-size: 14px;
}
.small-table .cell {
  padding: 5px 10px;
}
.small-table .first-row {
  grid-row: 1;
  background-color: #363636;
  padding: 5px 10px;
}
.small-table .first-row.button-buffer {
  width: 40px;
}
.small-table .small-table-divider {
  width: 1px;
  height: 100%;
  background-color: var(--primary-text-color);
}
.small-table .table-row-separator {
  height: 1px;
  width: 100%;
  grid-column: span 4;
  background-color: #595b5f;
}
.small-table .table-time-column {
  display: flex;
  justify-content: space-between;
}
.small-table .table-time-column .data-label {
  width: 150px;
}

@media only screen and (max-width: 1580px) {
  .td-hide-unnecessary {
    display: none;
  }
}
/*    @else {
        @error 'No value found for `gargantuan`. ' + 'Please make sure it is defined in `$breakpoints` map.';
    }*/
@media only screen and (max-width: 1280px) {
  .td-hide-primary {
    display: none;
  }
}
/*    @else {
        @error 'No value found for `huge`. ' + 'Please make sure it is defined in `$breakpoints` map.';
    }*/
@media only screen and (max-width: 1024px) {
  .td-hide-secondary {
    display: none;
  }
}
/*    @else {
        @error 'No value found for `large`. ' + 'Please make sure it is defined in `$breakpoints` map.';
    }*/
@media only screen and (max-width: 750px) {
  .td-hide-tertiary {
    display: none;
  }
  .show-medium-table {
    display: flex !important;
  }
  .hide-medium-table-text {
    text-indent: -9999px;
  }
}
/*    @else {
        @error 'No value found for `medium`. ' + 'Please make sure it is defined in `$breakpoints` map.';
    }*/
@media only screen and (max-width: 660px) {
  .hide-blank-thead {
    height: 0px;
  }
  .hide-blank-thead .hide-blank-text {
    font-size: 0;
  }
  .show-small-table {
    display: flex !important;
  }
  .p-small-table {
    margin-bottom: 2px;
  }
  .hide-table-text {
    text-indent: -9999px;
  }
  .td-hide-big-table {
    display: none;
  }
}
/*    @else {
        @error 'No value found for `small`. ' + 'Please make sure it is defined in `$breakpoints` map.';
    }*/
.progress-container {
  text-align: center;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 15px;
  position: relative;
}
.progress-container .progress-label {
  position: absolute;
  left: 39%;
  top: 7px;
  display: flex;
}
.progress-container .progress {
  border-radius: 6px;
  width: inherit;
  height: 35px;
  background-color: #14151e;
}
.progress-container .progress .progress-bar {
  height: 18px;
  border-radius: 4px;
  transition: 0.4s linear;
  transition-property: width, background-color;
  background-color: #00995c;
  width: 100%;
  height: 35px;
  animation: progressAnimationStrike 6s;
}

@keyframes progressAnimationStrike {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.mud-data-grid-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}

.mud-table-pagination {
  overflow: unset !important;
  height: fit-content !important;
}

.mud-table-container {
  height: inherit !important;
  background-color: #232d2b !important;
}

.mud-table {
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  height: inherit !important;
}

.mud-toolbar {
  display: flex;
  gap: 10px;
  color: var(--primary-text-color) !important;
  background-color: #232d2b !important;
}

.mud-table-cell {
  color: var(--primary-text-color) !important;
}

.mud-table-row {
  background-color: #15463b !important;
  height: auto;
}

.mud-datagrid-group {
  background-color: #232d2b !important;
}

.mud-table-head .mud-table-row {
  background-color: #232d2b !important;
}
.mud-table-head .mud-table-row .mud-table-cell {
  background-color: inherit !important;
}

.sidebar {
  background-color: #15463b;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 550px) {
  .sidebar {
    height: auto;
    min-height: auto;
  }
  .sidebar:has(> div:not(.top-row):not(.collapse)) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100%;
    z-index: 1000;
  }
}
@media (min-width: 551px) {
  .sidebar {
    height: 100vh;
  }
}
.sidebar .top-row {
  flex-shrink: 0;
  background-color: #15463b !important;
  height: auto !important;
}
@media (max-width: 550px) {
  .sidebar .top-row {
    position: relative;
    z-index: 1001;
  }
}
.sidebar .top-row .container-fluid .navbar-brand {
  color: #15463B;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar .top-row .container-fluid .navbar-brand .navbar-brand-logo {
  height: 35px;
  width: auto;
}
.sidebar .top-row .container-fluid .navbar-toggler {
  background-color: transparent;
  border: none;
}
@media (min-width: 551px) {
  .sidebar > div:not(.top-row) {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .sidebar > div:not(.top-row) nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
@media (max-width: 550px) {
  .sidebar .collapse {
    display: none !important;
  }
}
@media (min-width: 551px) {
  .sidebar .collapse {
    display: block !important;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }
}
@media (max-width: 550px) {
  .sidebar > div:not(.top-row):not(.collapse) {
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 3.5rem);
    flex-direction: column;
    background-color: #15463b;
  }
  .sidebar > div:not(.top-row):not(.collapse) nav {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.top-row-wide {
  justify-content: flex-end;
  height: 0;
  min-height: 0;
  display: none;
  align-items: center;
  background-color: var(secondary-background-color);
}
@media (max-width: 550px) {
  .top-row-wide {
    display: none;
  }
}

.top-row ::deep a, .top-row .btn-link {
  white-space: nowrap;
  margin-left: 1.5rem;
}

.top-row a:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 550px) {
  .top-row {
    display: block;
  }
  .top-row.auth {
    justify-content: space-between;
  }
  .top-row a, .top-row .btn-link {
    margin-left: 0;
  }
}
@media (min-width: 551px) {
  .page {
    flex-direction: row;
  }
  .sidebar {
    width: 250px;
    position: sticky;
    top: 0;
  }
  .top-row {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .top-row, article {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }
}
.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}
.form .float-container {
  width: 100%;
  margin-bottom: 10px;
}
.form .float-container .float-label {
  font-size: 16px;
  position: absolute;
  transform-origin: top left;
  /* transform: translate(0, 8px) scale(1); */
  transition: all 0.1s ease-in-out;
  user-select: none;
  cursor: text;
  pointer-events: none;
  width: auto;
  z-index: 1;
  transform: translate(0, -10px) scale(0.75);
  background-color: #1c1d2a;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 8px;
}
.form .float-container .float-input {
  font-size: 16px;
  outline: 0;
  padding: 10px 13px 5px 13px;
  width: inherit;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
  height: 42px;
  font-weight: lighter;
}

.brewery-wrapper {
  background-color: var(--primary-background-color);
  border-radius: 15px;
  padding: 15px;
}
.brewery-wrapper .recipe-wrapper {
  width: auto;
  max-width: fit-content;
}
.brewery-wrapper .recipe-wrapper .recipe-title {
  margin-bottom: 5px;
}
.brewery-wrapper .recipe-wrapper .recipe-title .recipe-subtitle {
  font-weight: bold;
}
.brewery-wrapper .recipe-wrapper .separator {
  background-color: #ffffff;
  width: auto;
  height: 1px;
  margin-bottom: 5px;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper {
  display: grid;
  grid-template-columns: 170px 70px auto;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .steps .previous-step {
  margin-bottom: 5px;
  opacity: 0.5;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .steps .actual-step {
  margin-bottom: 5px;
  font-size: 20px;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .steps .next-step {
  margin-bottom: 5px;
  opacity: 0.5;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .temperatures .temperature {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 20px;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .temperatures .temperature.not-actual {
  opacity: 0.5;
  font-size: 16px;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .temperatures .temperature .degree {
  opacity: 0.5;
  font-weight: normal;
  padding-left: 5px;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .times .time {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 20px;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .times .time.not-actual {
  opacity: 0.5;
  font-size: 16px;
}
.brewery-wrapper .recipe-wrapper .steps-wrapper .times .time .unit {
  opacity: 0.5;
  font-weight: normal;
  padding-left: 5px;
}
.brewery-wrapper .kettle-wrapper, .brewery-wrapper .vessels-wrapper, .brewery-wrapper .pump-wrapper, .brewery-wrapper .flow-meter {
  max-width: 320px;
  background-color: #14151e;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}
.brewery-wrapper .kettle-wrapper .card-top, .brewery-wrapper .vessels-wrapper .card-top, .brewery-wrapper .pump-wrapper .card-top, .brewery-wrapper .flow-meter .card-top {
  display: flex;
  justify-content: space-between;
}
.brewery-wrapper .kettle-wrapper .card-top .flame, .brewery-wrapper .vessels-wrapper .card-top .flame, .brewery-wrapper .pump-wrapper .card-top .flame, .brewery-wrapper .flow-meter .card-top .flame {
  height: 40px;
  display: none;
}
.brewery-wrapper .kettle-wrapper .card-top .flame.active, .brewery-wrapper .vessels-wrapper .card-top .flame.active, .brewery-wrapper .pump-wrapper .card-top .flame.active, .brewery-wrapper .flow-meter .card-top .flame.active {
  display: block;
}
.brewery-wrapper .kettle-wrapper .inputs-wrapper, .brewery-wrapper .vessels-wrapper .inputs-wrapper, .brewery-wrapper .pump-wrapper .inputs-wrapper, .brewery-wrapper .flow-meter .inputs-wrapper {
  display: grid;
  grid-template-columns: 200px auto;
}
.brewery-wrapper .kettle-wrapper .inputs-wrapper .current-temperature-wrapper, .brewery-wrapper .vessels-wrapper .inputs-wrapper .current-temperature-wrapper, .brewery-wrapper .pump-wrapper .inputs-wrapper .current-temperature-wrapper, .brewery-wrapper .flow-meter .inputs-wrapper .current-temperature-wrapper {
  display: flex;
}
.brewery-wrapper .kettle-wrapper .inputs-wrapper .current-temperature-wrapper p, .brewery-wrapper .vessels-wrapper .inputs-wrapper .current-temperature-wrapper p, .brewery-wrapper .pump-wrapper .inputs-wrapper .current-temperature-wrapper p, .brewery-wrapper .flow-meter .inputs-wrapper .current-temperature-wrapper p {
  width: 35px;
  max-width: 35px;
}
.brewery-wrapper .kettle-wrapper .inputs-wrapper .current-temperature-wrapper span, .brewery-wrapper .vessels-wrapper .inputs-wrapper .current-temperature-wrapper span, .brewery-wrapper .pump-wrapper .inputs-wrapper .current-temperature-wrapper span, .brewery-wrapper .flow-meter .inputs-wrapper .current-temperature-wrapper span {
  margin-left: 5px;
}
.brewery-wrapper .kettle-wrapper .inputs-wrapper .temperature-choose-wrapper, .brewery-wrapper .vessels-wrapper .inputs-wrapper .temperature-choose-wrapper, .brewery-wrapper .pump-wrapper .inputs-wrapper .temperature-choose-wrapper, .brewery-wrapper .flow-meter .inputs-wrapper .temperature-choose-wrapper {
  display: flex;
}
.brewery-wrapper .kettle-wrapper .inputs-wrapper .temperature-choose-wrapper input, .brewery-wrapper .vessels-wrapper .inputs-wrapper .temperature-choose-wrapper input, .brewery-wrapper .pump-wrapper .inputs-wrapper .temperature-choose-wrapper input, .brewery-wrapper .flow-meter .inputs-wrapper .temperature-choose-wrapper input {
  max-width: 35px;
  background-color: transparent;
  color: white;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px white solid;
}
.brewery-wrapper .kettle-wrapper .inputs-wrapper .temperature-choose-wrapper span, .brewery-wrapper .vessels-wrapper .inputs-wrapper .temperature-choose-wrapper span, .brewery-wrapper .pump-wrapper .inputs-wrapper .temperature-choose-wrapper span, .brewery-wrapper .flow-meter .inputs-wrapper .temperature-choose-wrapper span {
  margin-left: 5px;
}

.brewery-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.brewery-wrapper::-webkit-scrollbar {
  width: 8px;
}
.brewery-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.brewery-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
.brewery-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.ckt-tank-card {
  background: #15463b;
  border-radius: 5px;
  padding: 12px 10px;
  margin: 0;
  position: relative;
  height: 220px;
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.ckt-tank-card .ckt-card-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0px;
}
.ckt-tank-card .settings-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  color: #90ee90;
}
.ckt-tank-card .settings-icon-btn .settings-icons-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.ckt-tank-card .settings-icon-btn .settings-icons-stack .settings-icon {
  width: 16px;
  height: 16px;
  background-color: #18d1a6;
  mask-image: url("/img/ico-settings.svg");
  mask-size: 16px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/img/ico-settings.svg");
  -webkit-mask-size: 16px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.ckt-tank-card .ckt-card-title {
  text-align: center;
  margin-bottom: 0px;
}
.ckt-tank-card .ckt-card-title .tank-content-name {
  font-size: 17px;
  font-weight: 600;
  color: white;
  margin: 0;
  font-family: sans-serif;
}
.ckt-tank-card .ckt-card-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: white;
  font-size: 14px;
}
.ckt-tank-card .ckt-card-info .info-separator {
  color: white;
  font-size: 12px;
}
.ckt-tank-card .ckt-card-info .tank-volume,
.ckt-tank-card .ckt-card-info .tank-step {
  color: white;
}
.ckt-tank-card .ckt-card-info .cooling-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: white;
  mask-image: url("/img/ico-cooling.svg");
  mask-size: 13px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/img/ico-cooling.svg");
  -webkit-mask-size: 13px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.ckt-tank-card .ckt-card-info .warming-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: white;
  mask-image: url("/img/ico-warming.svg");
  mask-size: 13px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/img/ico-warming.svg");
  -webkit-mask-size: 13px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.ckt-tank-card .ckt-card-temperature {
  background: #0f3129;
  border-radius: 12px;
  padding: 14px 0px;
  margin-bottom: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ckt-tank-card .ckt-card-temperature .temperature-gradient-indicator {
  margin-bottom: 4px;
}
.ckt-tank-card .ckt-card-temperature .temperature-gradient-indicator .gradient-arrow {
  width: 20px;
  height: 20px;
  background-color: white;
  mask-image: url("/img/ico-gradient-arrow.svg");
  mask-size: 16px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/img/ico-gradient-arrow.svg");
  -webkit-mask-size: 16px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.ckt-tank-card .ckt-card-temperature .temperature-gradient-indicator .gradient-arrow.arrow-up {
  transform: rotate(0deg);
}
.ckt-tank-card .ckt-card-temperature .temperature-gradient-indicator .gradient-arrow.arrow-down {
  transform: rotate(90deg);
}
.ckt-tank-card .ckt-card-temperature .current-temperature-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 0px;
}
.ckt-tank-card .ckt-card-temperature .current-temperature-display .temperature-value {
  font-size: 30px;
  font-weight: bold;
  color: white;
  line-height: 1;
}
.ckt-tank-card .ckt-card-temperature .current-temperature-display .temperature-unit {
  font-size: 30px;
  color: white;
  opacity: 0.6;
  line-height: 1;
}
.ckt-tank-card .ckt-card-temperature .target-temperature-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: rgba(24, 209, 166, 0.5);
  font-size: 12px;
}
.ckt-tank-card .ckt-card-temperature .target-temperature-display .target-value {
  font-weight: 500;
}
.ckt-tank-card .ckt-card-temperature .target-temperature-display .target-value.error {
  color: #ff4444;
  font-weight: 600;
}
.ckt-tank-card .ckt-card-temperature .target-temperature-display .temperature-unit {
  font-size: 16px;
}
.ckt-tank-card .ckt-card-footer {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 0;
  right: calc(50% - 13px);
}
.ckt-tank-card .ckt-card-footer .tank-id-badge {
  background: #0B7C62;
  color: white;
  width: 26px;
  height: 32px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 768px) {
  .brewery-wrapper {
    padding: 15px;
    gap: 15px;
  }
  .ckt-tank-card {
    width: 180px;
    min-width: 180px;
    height: 200px;
    padding: 10px 8px;
  }
  .ckt-tank-card .ckt-card-title .tank-content-name {
    font-size: 15px;
  }
  .ckt-tank-card .ckt-card-info {
    font-size: 12px;
    gap: 6px;
  }
  .ckt-tank-card .ckt-card-temperature {
    padding: 12px 0px;
  }
  .ckt-tank-card .ckt-card-temperature .current-temperature-display .temperature-value {
    font-size: 26px;
  }
  .ckt-tank-card .ckt-card-temperature .current-temperature-display .temperature-unit {
    font-size: 26px;
  }
  .ckt-tank-card .ckt-card-temperature .target-temperature-display {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .brewery-wrapper {
    padding: 10px;
    gap: 10px;
  }
  .ckt-tank-card {
    width: 160px;
    min-width: 160px;
    height: 190px;
    padding: 8px 6px;
  }
  .ckt-tank-card .ckt-card-title .tank-content-name {
    font-size: 14px;
  }
  .ckt-tank-card .ckt-card-info {
    font-size: 11px;
    gap: 4px;
    margin-bottom: 6px;
  }
  .ckt-tank-card .ckt-card-temperature {
    padding: 10px 0px;
    margin-bottom: 12px;
  }
  .ckt-tank-card .ckt-card-temperature .current-temperature-display .temperature-value {
    font-size: 24px;
  }
  .ckt-tank-card .ckt-card-temperature .current-temperature-display .temperature-unit {
    font-size: 24px;
  }
  .ckt-tank-card .ckt-card-temperature .target-temperature-display {
    font-size: 10px;
  }
}
.washer-wrapper .controls-card {
  max-width: 400px;
  background-color: #292929;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  /*        .power-button {
              margin-top: 5px;
              margin-bottom: 10px;
          }*/
}
.washer-wrapper .controls-card .card-top {
  display: flex;
  justify-content: space-between;
}
.washer-wrapper .controls-card .card-content-wrapper {
  /*padding: 15px;*/
  border-radius: 4px;
  margin-bottom: 10px;
}
.washer-wrapper .controls-card .card-content-wrapper .card-content {
  display: flex;
  flex-direction: column;
}
.washer-wrapper .controls-card .card-content-wrapper .card-content .current-state-wrapper {
  display: flex;
  flex-direction: column;
}
.washer-wrapper .controls-card .card-content-wrapper .card-content .current-state-wrapper div {
  display: flex;
}
.washer-wrapper .controls-card .card-content-wrapper .card-content .input-wrapper {
  display: flex;
  justify-content: space-between;
  /*                    .power-button {
                          margin-top: 0px;
                      }*/
}

.keg-washer-step {
  display: grid;
  grid-template-columns: 20px auto 100px;
}
.keg-washer-step .step-activity-indicator {
  grid-column: 1;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  margin: auto;
  position: relative;
}
.keg-washer-step .step-activity-indicator.yellow {
  background-color: #FFA809;
}
.keg-washer-step .step-activity-indicator.green {
  background-color: #5CB85C;
}
.keg-washer-step .step-activity-indicator.green::after {
  opacity: 0;
  /*display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  height: 10px;
  width: 10px;
  background: #5CB85C;
  border-radius: 100%;
  animation-name: ripple;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
  z-index: 0;
}
.keg-washer-step .step-name {
  grid-column: 2;
}
.keg-washer-step .step-duration {
  grid-column: 3;
  text-align: right;
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(2, 2, 1);
  }
}
.keg-info-card {
  display: flex;
  margin-bottom: 5px;
  border-radius: 5px;
}
.keg-info-card:hover {
  cursor: pointer;
}
.keg-info-card:nth-child(odd) {
  background-color: #181924;
}
.keg-info-card .keg-status {
  width: 5px;
  border-radius: 5px 5px 5px 5px;
  margin-right: 5px;
}
.keg-info-card .keg-status.clean {
  /*background-color: #00B239;*/
  background-color: red;
}
.keg-info-card .keg-status.unclean {
  background-color: #B20804;
}
.keg-info-card .keg-info {
  width: 100%;
  margin: 5px;
}
.keg-info-card .keg-info.detail {
  margin: 15px;
}
.keg-info-card .keg-info .first-row {
  display: flex;
  justify-content: space-between;
}
.keg-info-card .keg-info .first-row .code {
  margin-bottom: 0px;
}
.keg-info-card .keg-info .first-row .keg-type {
  margin-bottom: 0px;
}
.keg-info-card .keg-info .second-row {
  display: flex;
  justify-content: space-between;
}
.keg-info-card .keg-info .second-row .left-side {
  display: flex;
  flex-direction: column;
}
.keg-info-card .keg-info .second-row .left-side .keg-location {
  margin-bottom: 0px;
}
.keg-info-card .keg-info .second-row .left-side .beer-in-keg {
  margin-bottom: 0px;
}

.scan-wrapper {
  display: flex;
  border-radius: 5px;
  background-color: #181924;
  padding: 15px;
  justify-content: space-between;
  margin-bottom: 15px;
}
.scan-wrapper:hover {
  cursor: pointer;
}
.scan-wrapper:hover .scan-text {
  text-decoration: underline;
}
.scan-wrapper .scan-text {
  font-size: 20px;
  margin-top: auto;
  margin-bottom: auto;
}
.scan-wrapper .scan-img {
  width: 50px;
}

.kegs-detail-info {
  display: flex;
}
.kegs-detail-info .keg-status {
  width: 5px;
  border-radius: 5px 5px 5px 5px;
  margin-right: 5px;
}
.kegs-detail-info .keg-status.clean {
  background-color: #00B239;
}
.kegs-detail-info .keg-status.unclean {
  background-color: #B20804;
}
.kegs-detail-info .keg-info-wrapper {
  display: flex;
  flex-direction: column;
}
.kegs-detail-info .keg-info-wrapper .inputs-row {
  display: flex;
  gap: 10px;
}
.kegs-detail-info .keg-info-wrapper .inputs-row input {
  color: var(--text-color);
  background-color: transparent;
  border: 1px solid #E84363;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 100px;
}
.kegs-detail-info .keg-info-wrapper .pickers .inputs-row input:hover {
  cursor: pointer;
  border: 2px solid #E84363;
  margin-bottom: 8px;
}

.picker-popup-wrapper {
  margin-left: 10px;
  margin-right: 10px;
}
.picker-popup-wrapper:last-child {
  margin-bottom: 20px;
}
.picker-popup-wrapper .picker-options {
  color: #ffffff;
}
.picker-popup-wrapper .picker-options:hover {
  cursor: pointer;
  text-decoration: underline;
}

.blazored-modal {
  background-color: #14151e !important;
  padding: 20px;
  border-radius: 6px;
  position: relative;
  width: 75%;
  max-width: 1024px;
  max-height: calc(100vh - 60px);
  border: none !important;
  overflow: auto;
  padding: 0 5px 0 5px !important;
}
.blazored-modal .bm-header {
  padding-bottom: 0px !important;
}
.blazored-modal .bm-header .bm-close {
  color: #e84363;
  margin: 5px 10px 0px 0px !important;
  padding: 0px !important;
}

.recipe-info-card {
  display: flex;
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 10px;
  flex-direction: column;
}
.recipe-info-card:hover {
  cursor: pointer;
}
.recipe-info-card:nth-child(odd) {
  background-color: #181924;
}
.recipe-info-card .first-row {
  display: flex;
  justify-content: space-between;
}
.recipe-info-card .first-row .recipe-name {
  font-weight: bold;
}
.recipe-info-card .first-row .recipe-plato .plato-sign {
  font-weight: bold;
  color: #e84363;
}
.recipe-info-card .second-row {
  display: flex;
  justify-content: space-between;
}
.recipe-info-card .second-row .units {
  display: flex;
}
.recipe-info-card .second-row .units .numbers .unit {
  margin-bottom: 0px;
  font-weight: bold;
  color: #e84363;
}
.recipe-info-card .second-row .separator {
  font-weight: bold;
  margin-left: 10px;
  margin-right: 10px;
}
.recipe-info-card .second-row .beer-style {
  font-weight: bold;
}

.recipe-detail-wrapper .info-card, .recipe-detail-wrapper .units-card {
  max-width: auto;
  background-color: #14151e;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}
.recipe-detail-wrapper .info-card .recipe-name {
  width: 100%;
}
.recipe-detail-wrapper .info-card .tool-row {
  display: flex;
  justify-content: space-between;
}
.recipe-detail-wrapper .info-card .tool-row .name {
  margin-top: auto;
  margin-bottom: auto;
}
.recipe-detail-wrapper .info-card .tool-row button {
  margin-bottom: 0px;
}
.recipe-detail-wrapper .info-card .malt-row {
  display: flex;
}
.recipe-detail-wrapper .info-card .malt-row .malts-info {
  width: 100%;
}
.recipe-detail-wrapper .info-card .malt-row .malts-info .first-row {
  display: flex;
  justify-content: space-between;
}
.recipe-detail-wrapper .info-card .malt-row .malts-info .first-row .producer {
  opacity: 0.5;
}
.recipe-detail-wrapper .info-card .malt-row .malts-info .second-row {
  display: flex;
  justify-content: space-between;
}
.recipe-detail-wrapper .info-card .malt-row .malts-info .second-row div {
  display: flex;
}
.recipe-detail-wrapper .info-card .malt-row .malts-info .second-row div .number {
  width: 50px;
  text-align: right;
}
.recipe-detail-wrapper .info-card .malt-row .malts-info .second-row div .unit {
  color: #e84363;
  margin-left: 5px;
}
.recipe-detail-wrapper .info-card .hops-row, .recipe-detail-wrapper .info-card .yeast-row, .recipe-detail-wrapper .info-card .mash-row, .recipe-detail-wrapper .info-card .other-row {
  display: flex;
}
.recipe-detail-wrapper .info-card .hops-row .hops-info, .recipe-detail-wrapper .info-card .hops-row .yeast-info, .recipe-detail-wrapper .info-card .hops-row .mash-info, .recipe-detail-wrapper .info-card .hops-row .other-info, .recipe-detail-wrapper .info-card .yeast-row .hops-info, .recipe-detail-wrapper .info-card .yeast-row .yeast-info, .recipe-detail-wrapper .info-card .yeast-row .mash-info, .recipe-detail-wrapper .info-card .yeast-row .other-info, .recipe-detail-wrapper .info-card .mash-row .hops-info, .recipe-detail-wrapper .info-card .mash-row .yeast-info, .recipe-detail-wrapper .info-card .mash-row .mash-info, .recipe-detail-wrapper .info-card .mash-row .other-info, .recipe-detail-wrapper .info-card .other-row .hops-info, .recipe-detail-wrapper .info-card .other-row .yeast-info, .recipe-detail-wrapper .info-card .other-row .mash-info, .recipe-detail-wrapper .info-card .other-row .other-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.recipe-detail-wrapper .info-card .hops-row .hops-info .left-side .first-row, .recipe-detail-wrapper .info-card .hops-row .yeast-info .left-side .first-row, .recipe-detail-wrapper .info-card .hops-row .mash-info .left-side .first-row, .recipe-detail-wrapper .info-card .hops-row .other-info .left-side .first-row, .recipe-detail-wrapper .info-card .yeast-row .hops-info .left-side .first-row, .recipe-detail-wrapper .info-card .yeast-row .yeast-info .left-side .first-row, .recipe-detail-wrapper .info-card .yeast-row .mash-info .left-side .first-row, .recipe-detail-wrapper .info-card .yeast-row .other-info .left-side .first-row, .recipe-detail-wrapper .info-card .mash-row .hops-info .left-side .first-row, .recipe-detail-wrapper .info-card .mash-row .yeast-info .left-side .first-row, .recipe-detail-wrapper .info-card .mash-row .mash-info .left-side .first-row, .recipe-detail-wrapper .info-card .mash-row .other-info .left-side .first-row, .recipe-detail-wrapper .info-card .other-row .hops-info .left-side .first-row, .recipe-detail-wrapper .info-card .other-row .yeast-info .left-side .first-row, .recipe-detail-wrapper .info-card .other-row .mash-info .left-side .first-row, .recipe-detail-wrapper .info-card .other-row .other-info .left-side .first-row {
  display: flex;
}
.recipe-detail-wrapper .info-card .hops-row .hops-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .hops-row .yeast-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .hops-row .mash-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .hops-row .other-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .yeast-row .hops-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .yeast-row .yeast-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .yeast-row .mash-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .yeast-row .other-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .mash-row .hops-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .mash-row .yeast-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .mash-row .mash-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .mash-row .other-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .other-row .hops-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .other-row .yeast-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .other-row .mash-info .left-side .first-row .hop-name, .recipe-detail-wrapper .info-card .other-row .other-info .left-side .first-row .hop-name {
  margin-left: 10px;
}
.recipe-detail-wrapper .info-card .hops-row .hops-info .measure-info, .recipe-detail-wrapper .info-card .hops-row .yeast-info .measure-info, .recipe-detail-wrapper .info-card .hops-row .mash-info .measure-info, .recipe-detail-wrapper .info-card .hops-row .other-info .measure-info, .recipe-detail-wrapper .info-card .yeast-row .hops-info .measure-info, .recipe-detail-wrapper .info-card .yeast-row .yeast-info .measure-info, .recipe-detail-wrapper .info-card .yeast-row .mash-info .measure-info, .recipe-detail-wrapper .info-card .yeast-row .other-info .measure-info, .recipe-detail-wrapper .info-card .mash-row .hops-info .measure-info, .recipe-detail-wrapper .info-card .mash-row .yeast-info .measure-info, .recipe-detail-wrapper .info-card .mash-row .mash-info .measure-info, .recipe-detail-wrapper .info-card .mash-row .other-info .measure-info, .recipe-detail-wrapper .info-card .other-row .hops-info .measure-info, .recipe-detail-wrapper .info-card .other-row .yeast-info .measure-info, .recipe-detail-wrapper .info-card .other-row .mash-info .measure-info, .recipe-detail-wrapper .info-card .other-row .other-info .measure-info {
  display: flex;
}
.recipe-detail-wrapper .info-card .hops-row .hops-info .number, .recipe-detail-wrapper .info-card .hops-row .yeast-info .number, .recipe-detail-wrapper .info-card .hops-row .mash-info .number, .recipe-detail-wrapper .info-card .hops-row .other-info .number, .recipe-detail-wrapper .info-card .yeast-row .hops-info .number, .recipe-detail-wrapper .info-card .yeast-row .yeast-info .number, .recipe-detail-wrapper .info-card .yeast-row .mash-info .number, .recipe-detail-wrapper .info-card .yeast-row .other-info .number, .recipe-detail-wrapper .info-card .mash-row .hops-info .number, .recipe-detail-wrapper .info-card .mash-row .yeast-info .number, .recipe-detail-wrapper .info-card .mash-row .mash-info .number, .recipe-detail-wrapper .info-card .mash-row .other-info .number, .recipe-detail-wrapper .info-card .other-row .hops-info .number, .recipe-detail-wrapper .info-card .other-row .yeast-info .number, .recipe-detail-wrapper .info-card .other-row .mash-info .number, .recipe-detail-wrapper .info-card .other-row .other-info .number {
  width: 50px;
  text-align: right;
}
.recipe-detail-wrapper .info-card .hops-row .hops-info .unit, .recipe-detail-wrapper .info-card .hops-row .yeast-info .unit, .recipe-detail-wrapper .info-card .hops-row .mash-info .unit, .recipe-detail-wrapper .info-card .hops-row .other-info .unit, .recipe-detail-wrapper .info-card .yeast-row .hops-info .unit, .recipe-detail-wrapper .info-card .yeast-row .yeast-info .unit, .recipe-detail-wrapper .info-card .yeast-row .mash-info .unit, .recipe-detail-wrapper .info-card .yeast-row .other-info .unit, .recipe-detail-wrapper .info-card .mash-row .hops-info .unit, .recipe-detail-wrapper .info-card .mash-row .yeast-info .unit, .recipe-detail-wrapper .info-card .mash-row .mash-info .unit, .recipe-detail-wrapper .info-card .mash-row .other-info .unit, .recipe-detail-wrapper .info-card .other-row .hops-info .unit, .recipe-detail-wrapper .info-card .other-row .yeast-info .unit, .recipe-detail-wrapper .info-card .other-row .mash-info .unit, .recipe-detail-wrapper .info-card .other-row .other-info .unit {
  color: #e84363;
  margin-left: 5px;
}
.recipe-detail-wrapper .info-card .yeast-row .yeast-info .right-side .producer {
  opacity: 0.5;
}
.recipe-detail-wrapper .info-card .mash-row .mash-info {
  display: flex;
  justify-content: space-between;
}
.recipe-detail-wrapper .info-card .mash-row .mash-info div {
  display: flex;
}
.recipe-detail-wrapper .info-card .mash-row .mash-info div .number {
  width: 50px;
  text-align: right;
}
.recipe-detail-wrapper .info-card .mash-row .mash-info div .unit {
  color: #e84363;
  margin-left: 5px;
}
.recipe-detail-wrapper .info-card .other-row .other-info .left-side div {
  display: flex;
}
.recipe-detail-wrapper .info-card .other-row .other-info .left-side div .number {
  width: 50px;
  text-align: right;
}
.recipe-detail-wrapper .info-card .other-row .other-info .left-side div .unit {
  color: #e84363;
  margin-left: 5px;
}
.recipe-detail-wrapper .info-card .other-row .other-info .right-side div {
  display: flex;
}
.recipe-detail-wrapper .info-card .other-row .other-info .right-side div .number {
  width: 50px;
  text-align: right;
}
.recipe-detail-wrapper .info-card .other-row .other-info .right-side div .unit {
  color: #e84363;
  margin-left: 5px;
}
.recipe-detail-wrapper .info-card .other-row .other-info .right-side p {
  text-align: right;
}
.recipe-detail-wrapper .info-card .add-link {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.recipe-detail-wrapper .info-card .add-link:hover {
  cursor: pointer;
  text-decoration: underline;
}
.recipe-detail-wrapper .info-card .total-info {
  display: flex;
  justify-content: space-between;
}
.recipe-detail-wrapper .info-card .total-info div {
  display: flex;
}
.recipe-detail-wrapper .info-card .total-info div .number {
  width: 50px;
  text-align: right;
}
.recipe-detail-wrapper .info-card .total-info div .unit {
  color: #e84363;
  margin-left: 5px;
}
.recipe-detail-wrapper .units-card {
  display: flex;
  justify-content: space-between;
}
.recipe-detail-wrapper .units-card .units-wrapper {
  display: grid;
  grid-template-columns: auto 50px;
}
.recipe-detail-wrapper .units-card .units-wrapper .numbers {
  text-align: right;
}
.recipe-detail-wrapper .units-card .units-wrapper .units {
  font-weight: bold;
  color: #e84363;
  margin-left: 10px;
}

.tanks-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.tanks-page .tanks-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tanks-page .tanks-header .page-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}
.tanks-page .vessels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}
@media (min-width: 1920px) {
  .tanks-page .vessels-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 28px;
  }
}
.tanks-page .vessel-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
}
.tanks-page .vessel-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.tanks-page .vessel-card .vessel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.tanks-page .vessel-card .vessel-header .vessel-name {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.tanks-page .vessel-card .vessel-header .settings-btn-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: #e0e7ff;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.tanks-page .vessel-card .vessel-header .settings-btn-small .settings-icon {
  font-size: 1.1rem;
}
.tanks-page .vessel-card .vessel-header .settings-btn-small:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.tanks-page .vessel-card .vessel-header .settings-btn-small:active {
  transform: translateY(0);
}
.tanks-page .vessel-card .vessel-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.tanks-page .vessel-card .vessel-metrics .metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tanks-page .vessel-card .vessel-metrics .metric-item .metric-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tanks-page .vessel-card .vessel-metrics .metric-item .metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}
.tanks-page .vessel-card .vessel-metrics .metric-item .metric-value .metric-unit {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4px;
}

.settings-content .settings-section {
  margin-bottom: 32px;
}
.settings-content .settings-section .settings-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.settings-content .settings-section .power-section {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}
.settings-content .settings-section .power-section .power-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.settings-content .settings-section .power-section .power-header .power-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
.settings-content .settings-section .power-section .power-header .power-display {
  font-size: 20px;
  font-weight: 700;
  color: #667eea;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.settings-content .settings-section .power-section .power-header .power-display .power-unit {
  font-size: 14px;
  font-weight: 400;
  color: rgba(102, 126, 234, 0.7);
}
.settings-content .settings-section .power-section .power-control-modern {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-content .settings-section .power-section .power-control-modern .power-decrement,
.settings-content .settings-section .power-section .power-control-modern .power-increment {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.settings-content .settings-section .power-section .power-control-modern .power-decrement:hover,
.settings-content .settings-section .power-section .power-control-modern .power-increment:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}
.settings-content .settings-section .power-section .power-control-modern .power-decrement:active,
.settings-content .settings-section .power-section .power-control-modern .power-increment:active {
  transform: scale(0.95);
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container {
  flex: 1;
  position: relative;
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s ease;
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s ease;
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-range::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-steps {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.settings-content .settings-section .power-section .power-control-modern .power-slider-container .power-steps .power-step-mark {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  position: absolute;
  transform: translateX(-50%);
}
.settings-content .settings-section .power-section .setting-description {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .tanks-page {
    padding: 20px;
  }
  .tanks-page .vessels-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
  .tanks-page .vessel-card {
    padding: 20px;
  }
  .tanks-page .vessel-card .vessel-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .tanks-page .vessel-card .vessel-metrics .metric-value {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .tanks-page {
    padding: 16px;
  }
  .tanks-page .tanks-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  .tanks-page .tanks-header .page-title {
    font-size: 24px;
  }
  .tanks-page .vessels-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tanks-page .vessel-card {
    padding: 16px;
  }
  .tanks-page .vessel-card .vessel-header {
    margin-bottom: 16px;
  }
  .tanks-page .vessel-card .vessel-header .vessel-name {
    font-size: 20px;
  }
  .tanks-page .vessel-card .vessel-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tanks-page .vessel-card .vessel-metrics .metric-item .metric-label {
    font-size: 10px;
  }
  .tanks-page .vessel-card .vessel-metrics .metric-item .metric-value {
    font-size: 20px;
  }
  .tanks-page .vessel-card .vessel-metrics .metric-item .metric-value .metric-unit {
    font-size: 12px;
  }
}
:root {
  /*--ico-check: url("../Styles/img/ico-check-dark.svg");*/
  --primary-text-color: hsl(0, 0%, 100%);
  --secondary-text-color: hsl(0, 0%, 100%);
  --tertiary-text-color: hsl(0, 0%, 86%);
  --primary-title-text-color: hsl(0, 0%, 100%);
  --primary-color: hsl(156, 100%, 30%);
  --secondary-color: hsl(0, 0%, 94%);
  --primary-warning-color: hsl(0, 39%, 50%);
  --secondary-warning-color: hsl(355, 67%, 60%);
  --tertiary-warning-color: hsl(0, 32%, 60%);
  --quaternary-warning-color: hsl(42, 92%, 53%);
  --primary-background-color: hsl(0, 0%, 9%);
  --secondary-background-color: hsl(0, 0%, 9%);
  --tertiary-background-color: hsl(169, 31%, 86%);
  --primary-content-background-color: hsl(0, 0%, 16%);
  --primary-separator-color: hsl(180, 1%, 80%);
  --secondary-separator-color: hsl(216, 3%, 36%);
  --primary-hover-color: hsl(216, 3%, 36%);
  --secondary-hover-color: hsl(0, 0%, 0%);
  --tertiary-hover-color: hsl(216, 3%, 25%);
  --primary-visited-color: hsl(220, 2%, 28%);
  --primary-border-color: hsl(180, 2%, 88%);
  --primary-link-color: hsl(156, 100%, 45%);
  --primary-filter-color: invert(42%) sepia(18%) saturate(2954%) hue-rotate(114deg) brightness(97%) contrast(103%);
  --secondary-filter-color: invert(15%) sepia(2%) saturate(0%) hue-rotate(225deg) brightness(92%) contrast(93%);
  --tertiary-filter-color: invert(78%) sepia(54%) saturate(6%) hue-rotate(57deg) brightness(87%) contrast(85%);
  --quaternary-filter-color: invert(38%) sepia(60%) saturate(4457%) hue-rotate(140deg) brightness(93%) contrast(101%);
  --primary-icon-filter-color: invert(99%) sepia(30%) saturate(217%) hue-rotate(303deg) brightness(109%) contrast(100%);
  --secondary-icon-filter-color: invert(0%) sepia(0%) saturate(7500%) hue-rotate(113deg) brightness(94%) contrast(106%);
  --primary-knob-color: hsl(0, 0%, 100%);
  --primary-switch-background-color: hsl(0, 0%, 40%);
  --primary-thead-background-color: hsl(0, 0%, 21%);
  --primary-scroller-color: hsl(0, 0%, 40%);
  --primary-delete-button-background-color: hsl(0, 0%, 24%);
  --primary-delete-button-hover-color: hsl(355, 67%, 45%);
  --primary-add-button-hover-color: hsl(168, 32%, 62%);
  --primary-box-background-color: hsl(0, 0%, 9%);
  --calendar-selected-color: hsl(156, 47%, 13%);
  --calendar-off-color: hsl(0, 0%, 9%);
}

.light {
  --primary-text-color: hsl(0, 0%, 0%);
  --secondary-text-color: hsl(0, 0%, 100%);
  --tertiary-text-color: hsl(0, 0%, 0%);
  --primary-title-text-color: hsl(0, 0%, 0%);
  --primary-color: hsl(156, 100%, 30%);
  --secondary-color: hsl(200, 1%, 51%);
  --primary-warning-color: hsl(0, 39%, 45%);
  --secondary-warning-color: hsl(355, 67%, 60%);
  --tertiary-warning-color: hsl(345, 93%, 57%);
  --quaternary-warning-color: hsl(42, 92%, 53%);
  --primary-background-color: hsl(0, 0%, 100%);
  --secondary-background-color: hsl(0, 0%, 96%);
  --tertiary-background-color: hsl(169, 31%, 86%);
  --primary-content-background-color: hsl(0, 0%, 100%);
  --primary-separator-color: hsl(180, 1%, 80%);
  --secondary-separator-color: hsl(0, 0%, 94%);
  --primary-hover-color: hsl(171, 30%, 95%);
  --secondary-hover-color: hsl(0, 0%, 0%);
  --tertiary-hover-color: hsl(171, 30%, 95%);
  --primary-visited-color: hsl(171, 25%, 90%);
  --primary-border-color: hsl(0, 0%, 0%);
  --primary-link-color: hsl(156, 100%, 30%);
  --primary-filter-color: invert(42%) sepia(18%) saturate(2954%) hue-rotate(114deg) brightness(97%) contrast(103%);
  --secondary-filter-color: invert(59%) sepia(9%) saturate(2159%) hue-rotate(119deg) brightness(93%) contrast(82%);
  --tertiary-filter-color: invert(78%) sepia(54%) saturate(6%) hue-rotate(57deg) brightness(87%) contrast(85%);
  --quaternary-filter-color: invert(38%) sepia(60%) saturate(4457%) hue-rotate(140deg) brightness(93%) contrast(101%);
  --primary-icon-filter-color: invert(0%) sepia(0%) saturate(7500%) hue-rotate(113deg) brightness(94%) contrast(106%);
  --secondary-icon-filter-color: invert(99%) sepia(30%) saturate(217%) hue-rotate(303deg) brightness(109%) contrast(100%);
  --primary-knob-color: hsl(0, 0%, 100%);
  --primary-switch-background-color: hsl(0, 0%, 80%);
  --primary-thead-background-color: hsl(0, 0%, 94%);
  --primary-scroller-color: hsl(210, 1%, 61%);
  --primary-delete-button-background-color: hsl(0, 0%, 63%);
  --primary-delete-button-hover-color: hsl(355, 67%, 45%);
  --primary-add-button-hover-color: hsl(168, 32%, 62%);
  --primary-box-background-color: hsl(0, 0%, 87%);
  --calendar-selected-color: hsl(156, 47%, 55%);
  --calendar-off-color: hsl(0, 0%, 96%);
}

h1:focus {
  outline: none;
}

a, .btn-link {
  color: #0071c1;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/*.content {
    padding-top: 1.1rem;
    background-color: var(--primary-content-background-color);
}*/
.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}