#loginPage .page__background {
  background-color: var(--navbar-color);
}

#loginPage .page__content {
  justify-content: center;
  align-items: center;
  display: flex;
}

#loginPage #content {
  text-align: center;
}

#loginPage #content #logo img {
  width: 200px;
}

#loginPage #loginCard {
  max-width: 400px;
}

#loginPage #loginCard .title {
  text-align: center;
  margin: 20px;
  font-size: 16px;
}

@media screen and (width <= 572px) {
  #loginPage #loginCard {
    margin: 20px;
  }
}

#accountPage #content {
  padding: 20px;
}

#accountPage .card {
  margin: 20px auto;
}

#accountPage .sectionTitle {
  font-size: 18px;
}

#accountPage #accountCard {
  text-align: center;
}

#accountPage #accountCard .icon {
  color: var(--dark-gray-color);
  font-size: 100px;
}

#accountPage #accountCard #fullname {
  color: var(--black-color);
  margin: 5px 0;
  font-size: 16px;
  font-weight: bold;
}

#accountPage #accountCard #principal {
  color: var(--dark-gray-color);
  font-size: 8px;
  font-weight: normal;
}

#accountPage #editAccountBtn, #accountPage #addContractBtn {
  min-width: 100px;
  padding: 5px 20px;
  font-size: 12px;
}

#accountPage #createContractCard {
  display: none;
}

#accountPage #createContractForm {
  margin: 10px;
  padding: 0;
}

#accountPage #noContracts {
  text-align: center;
  color: var(--dark-gray-color);
  padding: 40px 20px;
}

#accountPage #contractList .contract {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

#accountPage #contractList .contract:last-child {
  border-bottom: none;
}

#accountPage #contractList .contract .info .role {
  color: var(--dark-gray-color);
  font-size: 12px;
}

#accountPage #contractList .contract .info .status {
  background-color: var(--info);
  color: var(--white-color);
  border-radius: 10px;
  font-size: 12px;
}

#accountPage #contractList .contract .info .status.draft {
  background-color: var(--dark-gray-color);
  color: var(--white-color);
}

#accountPage #contractList .contract .info .status.delivered, #accountPage #contractList .contract .info .status.completed {
  background-color: var(--success);
  color: var(--white-color);
}

#accountPage #contractList .contract .btn {
  box-shadow: none;
  border-radius: 50%;
  min-width: auto;
  padding: 5px 8px;
}

#accountPage #contractList .contract .btn:disabled {
  background-color: #0000;
}

#accountPage #contractList .contract .btn .icon {
  font-size: 24px;
}

#editAccountPage .sectionTitle {
  color: var(--dark-gray-color);
  padding: 20px 5px;
  font-size: 18px;
  font-style: italic;
}

#editContractPage #content {
  padding: 20px;
}

#editContractPage #editContractForm {
  padding: 0;
}

#editContractPage #editContractCard .title {
  color: var(--black-color);
  font-size: 18px;
  font-weight: bold;
}

#editContractPage #editContractCard .description {
  color: var(--dark-gray-color);
  font-size: 14px;
  font-weight: normal;
}

#editContractPage #editContractCard .expansion-panel-toggler {
  background-color: var(--secondary-color);
  color: var(--text-secondary-color);
}

#editContractPage #editContractCard .expansion-panel-body {
  border: 2px solid var(--secondary-color);
}

#editContractPage #editContractCard .expansion-panel-toggler.collapsed {
  background-color: inherit;
  color: inherit;
}

#editContractPage #editContractCard .expansion-panel-toggler .material-icons {
  color: var(--text-secondary-color);
}

#editContractPage #editContractCard .expansion-panel-toggler.collapsed .material-icons {
  color: inherit;
}

#editContractPage #editContractCard .expansion-panel-toggler .articleLink {
  color: var(--white-color);
  text-decoration: underline;
}

#editContractPage #editContractCard .expansion-panel-toggler.collapsed .articleLink {
  color: var(--secondary-color);
  text-decoration: underline;
}

#editContractPage #editContractCard #contractListGroup .expansion-panel .list-group-item {
  border: 1px solid var(--light-gray-color);
}

#editContractPage #editContractCard .expansion-panel-body .alert {
  border-radius: 10px;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  display: flex;
}

#editContractPage #editContractCard .expansion-panel-body .alert .icon {
  margin-right: 10px;
  font-size: 20px;
}

#editContractPage #editContractCard .expansion-panel-body .infoAlert .icon {
  color: var(--dark-gray-color);
}

#editContractPage #editContractCard .expansion-panel-body .tipAlert .icon {
  color: var(--orange);
}

#editContractPage #editContractCard .expansion-panel-body .alert a {
  color: var(--secondary-color);
  text-decoration: underline;
}

#editContractPage #editContractCard .article {
  text-align: justify;
  margin: 10px 0;
  font-size: 14px;
}

#editContractPage #editContractCard #saveBtn {
  max-width: 200px;
  margin: 0 auto;
}

#editContractPage #editContractCard select[name="currency"] {
  text-align: center;
  min-width: 80px;
}

#editContractPage #editContractCard .itemRow .itemAmount {
  font-size: 10px;
}

#editContractPage #editContractCard .itemRow .removeItemBtn {
  min-width: auto;
  box-shadow: none;
  border-radius: 50%;
  padding: 6px;
  font-size: 20px;
}

#editContractPage #editContractCard .itemRow .input-group-append select {
  min-width: 60px;
}

#editContractPage #editContractCard #productExportAlert {
  border-radius: 10px;
  display: none;
}

#editContractPage #editContractCard #addItemBtn {
  border-radius: 10px;
}

#viewContractPage #content {
  padding: 20px;
}

#viewContractPage #switchSellerBuyerBtn {
  color: var(--dark-gray-color);
  border-radius: 10px;
  font-size: 10px;
}

#viewContractPage .sectionTitle {
  margin: 60px 0 40px;
  font-size: 18px;
}

#viewContractPage .statusDiv {
  margin: 20px 0;
}

#viewContractPage .statusDiv .iconDiv .icon {
  background-color: var(--first-color);
  color: #fff;
  border-radius: 50%;
  padding: 15px;
  font-size: 60px;
}

#viewContractPage .statusDiv#draft .iconDiv .icon {
  background-color: var(--warning);
  color: #fff;
}

#viewContractPage .statusDiv .title {
  text-align: center;
  margin: 0 auto;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}

#viewContractPage .statusDiv .text {
  text-align: center;
  padding: 0 10px;
  font-size: 14px;
  font-style: italic;
}

#viewContractPage .statusDiv .alert {
  max-width: 400px;
  margin: 0 auto;
}

#viewContractPage .statusDiv .alert .btn {
  border-radius: 50%;
  min-width: auto;
  padding: 5px;
}

#viewContractPage .statusDiv #shipGoodsForm {
  max-width: 500px;
  padding-bottom: 0;
}

#viewContractPage .trackingDiv {
  margin: 20px;
}

#viewContractPage .trackingDiv .stepper-horiz {
  width: 100%;
}

#viewContractPage .trackingDiv .stepper-horiz .step, #viewContractPage .trackingDiv .stepper-horiz .step:focus {
  text-align: center;
  background: none;
  border: none;
  outline: none;
  width: auto;
  height: auto;
  padding: 1.5rem;
  text-decoration: none;
  display: block;
}

#viewContractPage .details .trackingDiv .stepper-horiz:before, #viewContractPage .trackingDiv .stepper-horiz .stepper:after, #viewContractPage .trackingDiv .stepper-horiz .stepper:before {
  border-top: 2px solid var(--secondary-color);
}

#viewContractPage .trackingDiv .stepper-horiz:before {
  top: 40%;
  left: 40px;
  right: 40px;
}

#viewContractPage .trackingDiv .stepper-horiz .step:after, #viewContractPage .trackingDiv .stepper-horiz .step:before {
  top: 38%;
}

#viewContractPage .trackingDiv .stepper-horiz .step .stepper-icon {
  background-color: var(--light-gray-color);
  color: #fff;
  border: 4px solid #fff;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
}

#viewContractPage .trackingDiv .stepper-horiz .step.done .stepper-icon, #viewContractPage .trackingDiv .stepper-horiz .step.active .stepper-icon {
  background-color: var(--first-color);
  border: 4px solid var(--secondary-color);
  opacity: 1;
}

#viewContractPage .trackingDiv .stepper-horiz .step.active .stepper-icon {
  border: 4px solid var(--app-secondary-color);
  animation: 2s infinite pulse;
  transform: scale(1);
  box-shadow: 0 0 #000;
}

#viewContractPage .trackingDiv .stepper-horiz .step .stepper-text {
  color: var(--dark-gray-color);
  font-size: 14px;
  font-weight: normal;
  line-height: 28px;
  top: 10px;
}

#viewContractPage .trackingDiv .stepper-horiz .step.done .stepper-text, #viewContractPage .trackingDiv .stepper-horiz .step.active .stepper-text {
  color: var(--black-color);
  font-weight: bold;
}

@media screen and (width <= 992px) {
  #viewContractPage .trackingDiv .stepper-horiz .step {
    padding: 4px;
  }

  #viewContractPage .trackingDiv .stepper-horiz .step .stepper-text {
    font-size: 11px;
    line-height: 14px;
    top: 5px;
  }
}

#viewContractPage .shippingStatusDiv {
  margin: 20px;
}

#viewContractPage .shippingStatusDiv .sectionTitle {
  margin-bottom: 10px;
}

#viewContractPage .shippingStatusDiv .sectionSubtitle {
  text-align: center;
  font-size: 12px;
  font-style: italic;
}

#viewContractPage .shippingStatusDiv .checkpoint {
  padding-left: 0;
  padding-right: 0;
}

#viewContractPage .shippingStatusDiv .checkpoint:first-child {
  border-top: none;
}

#viewContractPage .shippingStatusDiv .checkpoint:last-child {
  border-bottom: none;
}

#viewContractPage .shippingStatusDiv .checkpoint .time {
  color: var(--dark-gray-color);
  font-size: 12px;
}

#viewContractPage .paymentStatusDiv {
  margin: 20px;
}

#viewContractPage .paymentStatusDiv .stepper-horiz {
  width: 100%;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step, #viewContractPage .paymentStatusDiv .stepper-horiz .step:focus {
  text-align: center;
  background: none;
  border: none;
  outline: none;
  width: auto;
  height: auto;
  padding: 1.5rem;
  text-decoration: none;
  display: block;
}

#viewContractPage .details .paymentStatusDiv .stepper-horiz:before, #viewContractPage .paymentStatusDiv .stepper-horiz .stepper:after, #viewContractPage .paymentStatusDiv .stepper-horiz .stepper:before {
  border-top: 2px solid var(--secondary-color);
}

#viewContractPage .paymentStatusDiv .stepper-horiz:before {
  top: 32%;
  left: 40px;
  right: 40px;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step:after, #viewContractPage .paymentStatusDiv .stepper-horiz .step:before {
  top: 38%;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step .stepper-icon {
  background-color: var(--light-gray-color);
  color: #fff;
  border: 4px solid #fff;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step .stepper-icon .icon {
  font-size: 24px;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step.done .stepper-icon, #viewContractPage .paymentStatusDiv .stepper-horiz .step.active .stepper-icon {
  background-color: var(--first-color);
  border: 4px solid var(--secondary-color);
  opacity: 1;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step.active .stepper-icon {
  border: 4px solid var(--app-secondary-color);
  animation: 2s infinite pulse;
  transform: scale(1);
  box-shadow: 0 0 #000;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step .stepper-text {
  color: var(--dark-gray-color);
  font-size: 14px;
  font-weight: normal;
  line-height: 28px;
  top: 10px;
}

#viewContractPage .paymentStatusDiv .stepper-horiz .step.done .stepper-text, #viewContractPage .paymentStatusDiv .stepper-horiz .step.active .stepper-text {
  color: var(--black-color);
  font-weight: bold;
}

@media screen and (width <= 992px) {
  #viewContractPage .paymentStatusDiv .stepper-horiz .step {
    padding: 4px;
  }

  #viewContractPage .paymentStatusDiv .stepper-horiz .step .stepper-text {
    font-size: 11px;
    line-height: 14px;
    top: 5px;
  }
}

#viewContractPage .paymentsDiv, #viewContractPage .withdrawalsDiv {
  margin: 20px;
}

#viewContractPage .paymentsDiv .payment, #viewContractPage .withdrawalsDiv .withdrawal {
  border: 1px solid var(--light-gray-color);
  font-size: 12px;
}

#viewContractPage .paymentsDiv .payment:first-child, #viewContractPage .withdrawalsDiv .withdrawal:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#viewContractPage .paymentsDiv .payment:last-child, #viewContractPage .withdrawalsDiv .withdrawal:last-child {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

#viewContractPage .paymentsDiv .payment .status, #viewContractPage .withdrawalsDiv .withdrawal .status {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 1px 10px;
  position: absolute;
  top: 10px;
  right: 10px;
}

#viewContractPage .paymentsDiv .payment .status.COMPLETED, #viewContractPage .withdrawalsDiv .withdrawal .status.COMPLETED {
  background-color: var(--first-color);
  color: #fff;
}

#viewContractPage .paymentsDiv .payment .status.FAILED, #viewContractPage .paymentsDiv .payment .status.CANCELLED, #viewContractPage .withdrawalsDiv .withdrawal .status.FAILED, #viewContractPage .withdrawalsDiv .withdrawal .status.CANCELLED {
  background-color: var(--danger);
  color: #fff;
}

#viewContractPage .paymentsDiv .payment .status.EXPIRED, #viewContractPage .paymentsDiv .payment .status.REFUNDED, #viewContractPage .withdrawalsDiv .withdrawal .status.EXPIRED, #viewContractPage .withdrawalsDiv .withdrawal .status.REFUNDED {
  background-color: var(--dark-gray-color);
  color: #fff;
}

#viewContractPage .paymentsDiv .payment .time, #viewContractPage .withdrawalsDiv .withdrawal .time {
  color: var(--dark-gray-color);
}

#viewContractPage .detailsDiv {
  margin: 20px;
}

#viewContractPage .detailsDiv .table th {
  font-weight: bold;
}

#viewContractChangesPage .title {
  color: var(--black-color);
  font-size: 18px;
  font-weight: bold;
}

#viewContractChangesPage .description {
  color: var(--dark-gray-color);
  font-size: 14px;
  font-weight: normal;
}

#viewContractChangesPage .when {
  color: var(--dark-gray-color);
  font-size: 12px;
}

#viewContractChangesPage .contractChange {
  font-size: 14px;
  line-height: 28px;
}

#viewContractChangesPage .contractChange span {
  border: 1px solid var(--dark-gray-color);
  border-radius: 10px;
  padding: 2px 8px;
  font-family: monospace;
  font-size: 12px;
}

#viewContractChangesPage .contractChange .fieldName {
  font-style: bold;
}

#viewContractChangesPage .contractChange .oldValue {
  color: var(--danger);
  border-color: var(--danger);
  text-decoration: line-through;
}

#viewContractChangesPage .contractChange .newValue {
  color: var(--success);
  border-color: var(--success);
}

#shareContractPage #content {
  padding: 20px;
}

#shareContractPage #shareContractForm {
  margin: 10px;
  padding: 0;
}

#shareContractPage #url {
  color: var(--black-color);
  text-align: center;
  margin: 0 auto;
  font-size: 14px;
}

#shareContractPage #shareBtn, #shareContractPage #copyBtn {
  background-color: var(--secondary-color);
  color: var(--text-secondary-color);
}

#addContractPage #content {
  padding: 20px;
}

#addContractPage .bottomToolbar {
  background-color: #0000;
}

#addContractPage #addContractCard {
  text-align: center;
  margin: 20px auto;
}

#addContractPage #addContractCard .icon {
  color: var(--first-color);
  font-size: 100px;
}

#addContractPage #addContractCard #name {
  color: var(--black-color);
  margin: 10px 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
}

#addContractPage #addContractCard #tip {
  font-size: 14px;
  font-weight: italic;
  color: var(--dark-gray-color);
}

#addContractPage #cancelBtn {
  color: var(--black-color);
  cursor: pointer;
  font-size: 10px;
  text-decoration: underline;
  display: block;
}

#adminPage #content {
  padding: 20px;
}

#adminPage .KPI {
  text-align: center;
}

#adminPage .balance {
  color: var(--secondary-color);
  font-size: 45px;
  font-weight: bold;
}

#adminPage .balanceLabel {
  color: var(--secondary-color);
}

#adminPage #canisterWalletLabel {
  color: var(--secondary-color);
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

#adminPage #canisterWalletAddress {
  color: var(--dark-gray-color);
  text-align: center;
  user-select: text;
  font-size: 12px;
  font-style: italic;
}

#adminPage #userList .user {
  font-size: 12px;
}

#adminPage #userListLabel {
  color: var(--dark-gray-color);
  font-size: 18px;
  line-height: 40px;
}
/*# sourceMappingURL=index.3092e1e0.css.map */