input[type="text"],
input[type="password"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea {
  padding: 0.5em 1em;
  font-size: 16px;
  border: 1px solid #aaaaaa;
  border-radius: 10px; }

select {
  padding: 0.5em 2em 0.5em 1em;
  font-size: 16px;
  background-image: linear-gradient(45deg, transparent 50%, #aaaaaa 50%), linear-gradient(135deg, #aaaaaa 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid #aaaaaa;
  border-radius: 10px; }

.btn {
  padding-left: 2em;
  padding-right: 2em;
  color: #ffffff;
  line-height: 44px;
  text-decoration: none;
  background-color: #aaaaaa;
  border-radius: 10px;
  cursor: pointer; }
  .btn:disabled {
    opacity: 0.5;
    cursor: default; }

a.btn {
  display: inline-block; }

html, body {
  height: 100%; }

body {
  line-height: 1.5;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  background-color: #aaaaaa; }

#app, #wrap {
  max-width: 834px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  overflow: hidden; }

#app-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  #app-menu #main {
    flex-grow: 1;
    padding: 32px;
    overflow: auto;
    background-color: #f3f3f3; }
  #app-menu .main-header .body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    color: #001543; }
    #app-menu .main-header .body .brand .lead {
      font-size: 12px; }
    #app-menu .main-header .body .brand .housedo {
      font-size: 24px; }
    #app-menu .main-header .body .heading {
      line-height: 1;
      font-size: 48px;
      font-weight: bold; }
  #app-menu .main-header .band {
    margin-top: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #001543;
    font-size: 20px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 15px; }
  #app-menu .main-body .category-item {
    margin-top: 32px; }
    #app-menu .main-body .category-item.category-item-interior .section-items {
      grid-template-columns: repeat(3, 1fr); }
    #app-menu .main-body .category-item .category-item-heading {
      padding-top: 8px;
      padding-left: 1em;
      padding-bottom: 8px;
      color: #ffffff;
      font-size: 24px;
      font-weight: bold;
      border-radius: 15px;
      background-color: #001543;
      box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.03); }
    #app-menu .main-body .category-item .category-item-description {
      margin-top: 16px; }
  #app-menu .main-body .section-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px; }
    #app-menu .main-body .section-items.col-3 {
      grid-template-columns: repeat(3, 1fr); }
    #app-menu .main-body .section-items .section-item {
      position: relative;
      padding: 12px;
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.03); }
      #app-menu .main-body .section-items .section-item .section-item-header .section-item-name {
        color: #001543;
        font-size: 13px; }
      #app-menu .main-body .section-items .section-item .section-item-header .section-item-subtitle {
        font-size: 10px; }
      #app-menu .main-body .section-items .section-item .section-item-image {
        margin-top: 12px;
        aspect-ratio: 4 / 3;
        background-color: #aaaaaa; }
      #app-menu .main-body .section-items .section-item .section-item-button {
        margin-top: 12px; }
        #app-menu .main-body .section-items .section-item .section-item-button .btn {
          line-height: 32px;
          color: #ffffff;
          font-size: 14px;
          text-align: center;
          background-color: #47aa50;
          border-radius: 10px; }
      #app-menu .main-body .section-items .section-item .section-item-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        background-color: rgba(245, 245, 220, 0.5); }
        #app-menu .main-body .section-items .section-item .section-item-overlay .label, #app-menu .main-body .section-items .section-item .section-item-overlay .btn {
          width: 8em;
          line-height: 2;
          text-align: center;
          border-radius: 1000px; }
        #app-menu .main-body .section-items .section-item .section-item-overlay .label {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 4px;
          background-color: #ffffff; }
          #app-menu .main-body .section-items .section-item .section-item-overlay .label .count {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
            vertical-align: middle;
            background-color: #47aa50;
            border-radius: 8px; }
        #app-menu .main-body .section-items .section-item .section-item-overlay .btn {
          color: #ffffff; }
        #app-menu .main-body .section-items .section-item .section-item-overlay .btn-update {
          background-color: #47aa50; }
        #app-menu .main-body .section-items .section-item .section-item-overlay .btn-remove {
          background-color: #d84040; }
  #app-menu .main-body .product-items .product-item {
    margin-top: 12px; }
    #app-menu .main-body .product-items .product-item .product-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center; }
    #app-menu .main-body .product-items .product-item .product-item-name {
      color: #001543;
      font-size: 9px; }
    #app-menu .main-body .product-items .product-item .product-item-option-label {
      padding-top: 3px;
      padding-left: 4px;
      padding-right: 4px;
      padding-bottom: 3px;
      line-height: 1;
      font-size: 6px;
      background-color: #f3f3f3; }
    #app-menu .main-body .product-items .product-item .product-item-price {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 8px;
      line-height: 1; }
    #app-menu .main-body .product-items .product-item .product-item-price-label {
      font-size: 8px; }
    #app-menu .main-body .product-items .product-item .product-item-price-value {
      font-size: 13px; }
      #app-menu .main-body .product-items .product-item .product-item-price-value .unit, #app-menu .main-body .product-items .product-item .product-item-price-value .suffix {
        font-size: 8px; }
    #app-menu .main-body .product-items .product-item .product-item-durations {
      margin-top: 8px;
      padding-top: 3px;
      padding-bottom: 3px;
      line-height: 1;
      font-size: 8px;
      text-align: center;
      background-color: #f3f3f3; }
  #app-menu #footer {
    flex: 0 0 90px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 16px;
    color: #ffffff;
    background-color: #046afe;
    overflow: hidden; }
    #app-menu #footer .footer-buttons {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 16px; }
      #app-menu #footer .footer-buttons .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 1em;
        padding-right: 1em;
        color: #333333;
        font-size: 17px;
        text-align: center;
        background-color: #ffffff; }
        #app-menu #footer .footer-buttons .btn:disabled {
          opacity: 1;
          color: #999999;
          background-color: #cccccc; }
    #app-menu #footer .footer-main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      gap: 12px; }
    #app-menu #footer .footer-price {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 6px;
      line-height: 1; }
      #app-menu #footer .footer-price .prefix {
        font-size: 16px; }
      #app-menu #footer .footer-price .amount {
        font-size: 32px;
        font-weight: bold; }
      #app-menu #footer .footer-price .suffix {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 4px; }
        #app-menu #footer .footer-price .suffix .unit {
          font-size: 16px; }
        #app-menu #footer .footer-price .suffix .tax {
          font-size: 10px; }
    #app-menu #footer .footer-notice {
      line-height: 1;
      font-size: 12px; }

#app-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  #app-list #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 32px;
    padding-right: 32px; }
    #app-list #header .header-comment {
      flex: 1 1 auto; }
    #app-list #header .header-button {
      flex: 0 0 auto; }
      #app-list #header .header-button .btn {
        padding-left: 2em;
        padding-right: 2em;
        color: #ffffff;
        line-height: 44px;
        background-color: #d84040; }
  #app-list #main {
    flex: 1 1 auto;
    padding-left: 32px;
    padding-right: 32px;
    overflow: auto; }
    #app-list #main .main-table {
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 12px; }
      #app-list #main .main-table .main-table-header {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 4;
        height: 3em;
        color: #ffffff;
        background-color: #001543;
        border-radius: 15px; }
        #app-list #main .main-table .main-table-header .cell {
          line-height: 3;
          padding-left: 1em; }
      #app-list #main .main-table .main-table-body {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 4;
        gap: 12px;
        overflow: auto; }
        #app-list #main .main-table .main-table-body .table-category,
        #app-list #main .main-table .main-table-body .table-subtotal {
          display: grid;
          grid-template-columns: subgrid;
          grid-column: span 4;
          gap: 12px; }
        #app-list #main .main-table .main-table-body .table-subtotal {
          padding-top: 12px;
          border-top: 1px solid #aaaaaa; }
        #app-list #main .main-table .main-table-body .table-category-header {
          grid-column: span 4;
          padding-left: 1em;
          line-height: 2;
          background-color: #f3f3f3;
          border-radius: 10px; }
        #app-list #main .main-table .main-table-body .table-section {
          display: grid;
          grid-template-columns: subgrid;
          grid-column: span 4;
          gap: 16px;
          gap: 16px; }
        #app-list #main .main-table .main-table-body .table-section-header {
          grid-column: span 4;
          padding-left: 1em;
          font-size: 18px;
          font-weight: bold; }
        #app-list #main .main-table .main-table-body .table-item {
          display: contents; }
          #app-list #main .main-table .main-table-body .table-item .cell-product {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 12px;
            grid-column: 1; }
            #app-list #main .main-table .main-table-body .table-item .cell-product .image {
              width: 100px;
              height: 70px;
              background-color: #aaaaaa; }
            #app-list #main .main-table .main-table-body .table-item .cell-product .info .name {
              font-size: 20px; }
            #app-list #main .main-table .main-table-body .table-item .cell-product .info .plan, #app-list #main .main-table .main-table-body .table-item .cell-product .info .options {
              font-size: 12px; }
          #app-list #main .main-table .main-table-body .table-item .cell-price, #app-list #main .main-table .main-table-body .table-item .cell-quantity, #app-list #main .main-table .main-table-body .table-item .cell-buttons {
            display: flex;
            align-items: center; }
          #app-list #main .main-table .main-table-body .table-item .cell-price {
            grid-column: 2;
            justify-content: flex-end;
            font-size: 24px;
            white-space: nowrap; }
            #app-list #main .main-table .main-table-body .table-item .cell-price input[type="text"] {
              margin-left: 0.5em;
              width: 160px;
              text-align: right; }
          #app-list #main .main-table .main-table-body .table-item .cell-quantity input[type="number"] {
            width: 70px; }
          #app-list #main .main-table .main-table-body .table-item .cell-buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            gap: 5px; }
            #app-list #main .main-table .main-table-body .table-item .cell-buttons .btn {
              width: 5em;
              padding-left: 0;
              padding-right: 0;
              line-height: 2;
              color: #ffffff;
              font-size: 14px;
              text-align: center;
              border-radius: 5px; }
            #app-list #main .main-table .main-table-body .table-item .cell-buttons .btn-change {
              background-color: #47aa50; }
            #app-list #main .main-table .main-table-body .table-item .cell-buttons .btn-remove {
              background-color: #d84040; }
          #app-list #main .main-table .main-table-body .table-item .cell-discount-title input {
            min-width: 0;
            width: 100%; }
          #app-list #main .main-table .main-table-body .table-item .cell-note-content {
            grid-column: span 4; }
  #app-list #footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 32px; }
    #app-list #footer .footer-button .btn {
      padding-left: 2em;
      padding-right: 2em;
      color: #ffffff;
      line-height: 44px;
      background-color: #aaaaaa; }
    #app-list #footer .footer-price-submit {
      display: flex;
      align-items: center;
      gap: 2em;
      height: 44px;
      padding-left: 2em;
      padding-right: 2em;
      color: #ffffff;
      background-color: #47aa50;
      border-radius: 10px; }

.wrap-estimate {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  @media print {
    .wrap-estimate {
      padding: 0; } }
  @media print {
    .wrap-estimate #top-bar {
      display: none; } }
  .wrap-estimate #main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-left: 32px;
    margin-right: 32px;
    padding: 40px;
    border: 1px solid #333333;
    overflow: auto; }
    @media print {
      .wrap-estimate #main {
        margin: 0;
        border: none; } }
    .wrap-estimate #main .date {
      grid-column: span 2;
      margin-bottom: 16px;
      text-align: right; }
    .wrap-estimate #main .heading {
      grid-column: span 2;
      margin-bottom: 40px;
      text-align: center; }
    .wrap-estimate #main .info-column {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px; }
    .wrap-estimate #main .customer .name {
      margin-bottom: 16px;
      font-size: 20px; }
    .wrap-estimate #main .customer .lead {
      margin-bottom: 8px;
      font-size: 14px; }
    .wrap-estimate #main .company .shop {
      margin-bottom: 16px;
      font-size: 24px; }
    .wrap-estimate #main .company .company, .wrap-estimate #main .company .address, .wrap-estimate #main .company .tel, .wrap-estimate #main .company .charge {
      font-size: 14px; }
    .wrap-estimate #main .company .company {
      margin-bottom: 6px; }
    .wrap-estimate #main .total {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 16px;
      border-bottom: 1px solid #333333; }
      .wrap-estimate #main .total .label {
        font-size: 14px; }
      .wrap-estimate #main .total .price {
        font-size: 20px; }
    .wrap-estimate #main .table {
      grid-column: span 2;
      display: grid;
      grid-template-columns: repeat(5, auto);
      margin-top: 24px;
      font-size: 14px; }
      .wrap-estimate #main .table .table-section-header,
      .wrap-estimate #main .table .cell {
        padding-left: 20px;
        padding-right: 20px; }
      .wrap-estimate #main .table .table-header {
        grid-column: span 5;
        display: grid;
        grid-template-columns: subgrid;
        color: #ffffff;
        background-color: #333333; }
        .wrap-estimate #main .table .table-header .cell {
          padding-top: 8px;
          padding-bottom: 8px; }
          .wrap-estimate #main .table .table-header .cell.cell-quantity, .wrap-estimate #main .table .table-header .cell.cell-unit, .wrap-estimate #main .table .table-header .cell.cell-unit-price, .wrap-estimate #main .table .table-header .cell.cell-price {
            text-align: center; }
      .wrap-estimate #main .table .table-category,
      .wrap-estimate #main .table .table-section-total {
        grid-column: span 5;
        display: grid;
        grid-template-columns: subgrid; }
        .wrap-estimate #main .table .table-category .table-category-header,
        .wrap-estimate #main .table .table-section-total .table-category-header {
          grid-column: span 5;
          padding-top: 4px;
          padding-left: 20px;
          padding-bottom: 4px;
          color: #ffffff;
          background-color: #aaaaaa; }
        .wrap-estimate #main .table .table-category .table-item,
        .wrap-estimate #main .table .table-section-total .table-item {
          grid-column: span 5;
          display: grid;
          grid-template-columns: subgrid; }
          .wrap-estimate #main .table .table-category .table-item .cell,
          .wrap-estimate #main .table .table-section-total .table-item .cell {
            padding-top: 4px;
            padding-bottom: 4px; }
            .wrap-estimate #main .table .table-category .table-item .cell.cell-name .options,
            .wrap-estimate #main .table .table-section-total .table-item .cell.cell-name .options {
              font-size: 0.85em; }
            .wrap-estimate #main .table .table-category .table-item .cell.cell-quantity, .wrap-estimate #main .table .table-category .table-item .cell.cell-unit,
            .wrap-estimate #main .table .table-section-total .table-item .cell.cell-quantity,
            .wrap-estimate #main .table .table-section-total .table-item .cell.cell-unit {
              text-align: center; }
            .wrap-estimate #main .table .table-category .table-item .cell.cell-unit-price, .wrap-estimate #main .table .table-category .table-item .cell.cell-price,
            .wrap-estimate #main .table .table-section-total .table-item .cell.cell-unit-price,
            .wrap-estimate #main .table .table-section-total .table-item .cell.cell-price {
              text-align: right; }
      .wrap-estimate #main .table .table-section-total .table-item .cell {
        padding-top: 4px;
        padding-bottom: 4px; }
        .wrap-estimate #main .table .table-section-total .table-item .cell.cell-label {
          grid-column: 4;
          color: #ffffff;
          text-align: center;
          background-color: #aaaaaa; }
      .wrap-estimate #main .table .table-note {
        grid-column: span 5; }
        .wrap-estimate #main .table .table-note .table-note-header {
          padding: 4px 20px;
          color: #ffffff;
          background-color: #333333; }
        .wrap-estimate #main .table .table-note .table-note-content {
          padding: 4px 20px; }
  .wrap-estimate #footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 12px; }
    @media print {
      .wrap-estimate #footer {
        display: none; } }
    .wrap-estimate #footer .btn {
      flex: 1 1 auto;
      line-height: 3;
      text-align: center;
      border: 1px solid #333333; }

.popup-options {
  width: auto;
  height: auto; }

.popup-options-main {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 16px; }
  .popup-options-main label {
    grid-column: span 3;
    display: grid;
    grid-template-columns: subgrid;
    gap: 8px;
    line-height: 1;
    font-size: 18px; }
    .popup-options-main label .price .prefix {
      margin-right: 1em;
      font-size: 12px; }
    .popup-options-main label .price .unit {
      margin-right: 0.5em;
      font-size: 12px; }

.popup-options-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; }
  .popup-options-buttons .btn {
    line-height: 2;
    color: #ffffff;
    text-align: center; }
    .popup-options-buttons .btn.btn-back {
      background-color: #aaaaaa; }
    .popup-options-buttons .btn.btn-submit {
      background-color: #47aa50; }

.product-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 20; }
  .product-menu .product-menu-overlay {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden; }
  .product-menu .product-menu-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: #f3f3f3;
    border-radius: 10px;
    overflow: hidden; }
  .product-menu .product-menu-header {
    flex: 0 0 auto;
    margin-left: 24px;
    margin-right: 24px;
    padding-top: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    color: white;
    font-size: 24px;
    background-color: #001543;
    border-radius: 15px; }
  .product-menu .product-menu-sort {
    padding-left: 24px;
    padding-right: 24px;
    text-align: right; }
    .product-menu .product-menu-sort select {
      background-color: #ffffff;
      border: none; }
  .product-menu .product-menu-items {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-left: 24px;
    padding-right: 24px;
    overflow: auto; }
  .product-menu .product-menu-item {
    padding: 12px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.03); }
    .product-menu .product-menu-item .product-menu-item-header {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto; }
      .product-menu .product-menu-item .product-menu-item-header .product-menu-item-name {
        grid-row: 1 / 3;
        color: #001543;
        font-size: 24px;
        font-weight: bold; }
      .product-menu .product-menu-item .product-menu-item-header .product-menu-item-durations {
        text-align: right; }
        .product-menu .product-menu-item .product-menu-item-header .product-menu-item-durations .box {
          display: inline-block;
          text-align: center;
          padding-left: 1em;
          padding-right: 1em;
          background-color: #f3f3f3; }
      .product-menu .product-menu-item .product-menu-item-header .product-menu-item-price {
        text-align: right; }
        .product-menu .product-menu-item .product-menu-item-header .product-menu-item-price .prefix {
          margin-right: 1em; }
        .product-menu .product-menu-item .product-menu-item-header .product-menu-item-price .value {
          font-size: 30px; }
    .product-menu .product-menu-item .product-menu-item-gallery {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 120px 120px;
      gap: 12px;
      margin-top: 12px; }
      .product-menu .product-menu-item .product-menu-item-gallery .image {
        background-color: #aaaaaa; }
        .product-menu .product-menu-item .product-menu-item-gallery .image:first-child {
          grid-row: 1 / 3; }
    .product-menu .product-menu-item .product-menu-item-description {
      margin-top: 12px; }
    .product-menu .product-menu-item .product-menu-item-info {
      margin-top: 12px;
      font-size: 0.8em; }
    .product-menu .product-menu-item .product-menu-item-option-button {
      margin-top: 12px;
      text-align: center; }
      .product-menu .product-menu-item .product-menu-item-option-button .btn {
        display: inline-block;
        padding-left: 3em;
        padding-right: 3em;
        color: #ffffff;
        line-height: 3;
        background-color: #47aa50; }
  .product-menu .product-menu-cart {
    flex: 1 1 auto;
    padding-left: 24px;
    padding-right: 24px;
    overflow: auto; }
  .product-menu .product-menu-cart-items {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px; }
  .product-menu .product-menu-cart-item {
    grid-column: span 4;
    display: grid;
    grid-template-columns: subgrid;
    gap: 24px;
    padding: 12px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.03); }
    .product-menu .product-menu-cart-item.update {
      background-color: beige;
      outline: 3px solid #fff2cc; }
    .product-menu .product-menu-cart-item.update-other {
      opacity: 0.8; }
    .product-menu .product-menu-cart-item .product-menu-cart-item-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; }
      .product-menu .product-menu-cart-item .product-menu-cart-item-info .name {
        font-size: 16px;
        font-weight: bold; }
      .product-menu .product-menu-cart-item .product-menu-cart-item-info .options {
        font-size: 12px; }
    .product-menu .product-menu-cart-item .product-menu-cart-item-price {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      font-size: 26px;
      font-weight: bold;
      text-wrap: nowrap; }
    .product-menu .product-menu-cart-item .product-menu-cart-item-quantity {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; }
    .product-menu .product-menu-cart-item .product-menu-cart-item-buttons {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 4px; }
      .product-menu .product-menu-cart-item .product-menu-cart-item-buttons .btn {
        padding-left: 2em;
        padding-right: 2em;
        line-height: 2;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        border-radius: 5px; }
        .product-menu .product-menu-cart-item .product-menu-cart-item-buttons .btn.btn-update {
          background-color: #47aa50; }
        .product-menu .product-menu-cart-item .product-menu-cart-item-buttons .btn.btn-remove {
          background-color: #d84040; }
  .product-menu .product-menu-buttons {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-left: 24px;
    padding-right: 24px; }
    .product-menu .product-menu-buttons .btn {
      color: #ffffff;
      line-height: 44px;
      font-size: 24px;
      text-align: center;
      background-color: #47aa50; }
      .product-menu .product-menu-buttons .btn.btn-cancel {
        background-color: #d84040; }
  .product-menu .product-menu-item-options {
    margin-top: 16px; }
  .product-menu .product-menu-item-options-heading {
    padding-left: 1em;
    line-height: 2;
    background-color: #f3f3f3;
    border-radius: 10px; }
  .product-menu .product-menu-item-options-items {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    margin-top: 12px; }
  .product-menu .product-menu-item-options-item {
    grid-column: span 3;
    display: grid;
    grid-template-columns: subgrid;
    gap: 8px; }
    .product-menu .product-menu-item-options-item label {
      grid-column: span 3;
      display: grid;
      grid-template-columns: subgrid;
      gap: 8px; }
      .product-menu .product-menu-item-options-item label .checkbox {
        display: flex;
        align-items: center; }
      .product-menu .product-menu-item-options-item label .price {
        text-align: right; }
  .product-menu .product-menu-item-calculation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #aaaaaa; }
  .product-menu .product-menu-item-quantity .number-input-with-buttons {
    margin-left: 1em; }
  .product-menu .product-menu-item-total-price .prefix, .product-menu .product-menu-item-total-price .unit {
    margin-right: 1em; }
  .product-menu .product-menu-item-total-price .value {
    font-size: 30px; }
  .product-menu .product-menu-item-buttons {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px; }
    .product-menu .product-menu-item-buttons .btn {
      color: #ffffff;
      line-height: 44px;
      font-size: 24px;
      text-align: center;
      background-color: #47aa50; }
      .product-menu .product-menu-item-buttons .btn.btn-cancel {
        background-color: #d84040; }

.note-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 20; }
  .note-modal .note-modal-overlay {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden; }
  .note-modal .note-modal-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
    width: calc(100% - 48px);
    height: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden; }
    .note-modal .note-modal-box .textarea {
      height: 164px; }
    .note-modal .note-modal-box .buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px; }
      .note-modal .note-modal-box .buttons .btn-save {
        background-color: #47aa50; }
      .note-modal .note-modal-box .buttons .btn-cancel {
        background-color: #d84040; }

.update-estimate-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 20; }
  .update-estimate-modal .update-estimate-modal-overlay {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden; }
  .update-estimate-modal .update-estimate-modal-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
    width: calc(100% - 48px);
    max-width: 738px;
    height: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: 24px;
    color: #333333;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden; }
    .update-estimate-modal .update-estimate-modal-box .message {
      text-align: center; }
    .update-estimate-modal .update-estimate-modal-box .buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px; }
      .update-estimate-modal .update-estimate-modal-box .buttons .btn {
        width: 200px;
        max-width: calc((100% - 48px) / 3);
        color: #ffffff !important; }
        .update-estimate-modal .update-estimate-modal-box .buttons .btn.btn-update, .update-estimate-modal .update-estimate-modal-box .buttons .btn.btn-new {
          background-color: #47aa50 !important; }
        .update-estimate-modal .update-estimate-modal-box .buttons .btn.btn-cancel {
          background-color: #d84040 !important; }

.number-input-with-buttons {
  display: inline-flex;
  align-items: stretch;
  width: 100px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff; }
  .number-input-with-buttons .number-input-btn {
    width: 28px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.2s ease; }
    .number-input-with-buttons .number-input-btn:hover {
      background: #e0e0e0; }
    .number-input-with-buttons .number-input-btn:active {
      background: #ccc; }
  .number-input-with-buttons .number-input-field {
    flex: 1 1 0%;
    min-width: 0;
    padding: 0;
    text-align: center;
    border: none;
    outline: none;
    font-size: 14px; }
    .number-input-with-buttons .number-input-field::-webkit-inner-spin-button, .number-input-with-buttons .number-input-field::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0; }
  .number-input-with-buttons .decrement {
    border-right: 1px solid #ccc; }
  .number-input-with-buttons .increment {
    border-left: 1px solid #ccc; }

.main-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  height: 100%;
  background-color: #f3f3f3; }
  .main-login .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 640px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: #f3f3f3; }
    .main-login .box .fields {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24px; }
    .main-login .box .button {
      margin-top: 24px;
      text-align: center; }
      .main-login .box .button .btn {
        background-color: #47aa50; }

#top-bar {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 32px;
  color: #ffffff;
  background-color: #001543; }
  #top-bar .info {
    display: flex;
    align-items: center;
    gap: 12px; }
    #top-bar .info .property-type {
      display: inline-block;
      padding: 0 0.5em;
      color: #ffffff;
      background-color: #47aa50; }
  #top-bar .buttons {
    display: flex;
    align-items: center;
    gap: 12px; }
  #top-bar .icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    color: #ffffff;
    font-size: 24px;
    text-decoration: none; }

.wrap-home {
  display: grid;
  grid-template-rows: auto 1fr; }
  .wrap-home #main {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f3f3f3;
    overflow: auto; }
    .wrap-home #main .heading {
      font-size: 36px;
      text-align: center; }
    .wrap-home #main .estimate-list {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 16px 24px;
      width: 100%;
      max-width: 640px;
      margin-top: 40px;
      margin-left: auto;
      margin-right: auto; }
      .wrap-home #main .estimate-list .header, .wrap-home #main .estimate-list .item {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        padding: 12px;
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.03); }
        .wrap-home #main .estimate-list .header .customer, .wrap-home #main .estimate-list .header .date, .wrap-home #main .estimate-list .header .buttons, .wrap-home #main .estimate-list .item .customer, .wrap-home #main .estimate-list .item .date, .wrap-home #main .estimate-list .item .buttons {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center; }
        .wrap-home #main .estimate-list .header .buttons .btn, .wrap-home #main .estimate-list .item .buttons .btn {
          background-color: #47aa50; }
      .wrap-home #main .estimate-list .header {
        color: #ffffff;
        background-color: #001543; }
    .wrap-home #main .pager {
      width: 100%;
      max-width: 640px;
      margin-top: 16px;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden; }
      .wrap-home #main .pager .btn-prev {
        float: left; }
      .wrap-home #main .pager .btn-next {
        float: right; }
    .wrap-home #main .new-estimate-button {
      margin-top: 40px;
      text-align: center; }
      .wrap-home #main .new-estimate-button .btn {
        background-color: #47aa50; }

.wrap-select-property-type {
  display: grid;
  grid-template-rows: auto 1fr; }
  .wrap-select-property-type #main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3; }
    .wrap-select-property-type #main .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 40px;
      width: 640px;
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.03); }
      .wrap-select-property-type #main .box .heading {
        font-size: 30px; }
      .wrap-select-property-type #main .box .buttons {
        max-width: 200px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px; }
        .wrap-select-property-type #main .box .buttons .btn {
          background-color: #47aa50; }

.wrap-select-customer {
  display: grid;
  grid-template-rows: auto 1fr; }
  .wrap-select-customer #main {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f3f3f3;
    overflow: auto; }
    .wrap-select-customer #main .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      width: 640px;
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.03); }
    .wrap-select-customer #main .heading {
      font-size: 30px; }
    .wrap-select-customer #main .form {
      display: grid;
      grid-template-columns: 7em 1fr;
      gap: 32px 16px;
      padding: 16px;
      width: 100%;
      max-width: 540px; }
      .wrap-select-customer #main .form input[type="text"] {
        min-width: 0; }
      .wrap-select-customer #main .form .section-staff, .wrap-select-customer #main .form .section-customer {
        display: contents; }
      .wrap-select-customer #main .form .section-staff label {
        display: flex;
        align-items: center; }
      .wrap-select-customer #main .form .section-customer:has(input[type="radio"][value="skip"]:checked) .field-new-customer,
      .wrap-select-customer #main .form .section-customer:has(input[type="radio"][value="skip"]:checked) .field-registered-customer {
        display: none; }
      .wrap-select-customer #main .form .section-customer:has(input[type="radio"][value="new"]:checked) .field-registered-customer {
        display: none; }
      .wrap-select-customer #main .form .section-customer:has(input[type="radio"][value="registered"]:checked) .field-new-customer {
        display: none; }
      .wrap-select-customer #main .form .field-type {
        grid-column: span 2;
        display: flex;
        justify-content: center;
        gap: 1em; }
        .wrap-select-customer #main .form .field-type input[type=radio] {
          margin-right: 0.3em; }
      .wrap-select-customer #main .form .field-new-customer,
      .wrap-select-customer #main .form .field-registered-customer {
        display: contents; }
        .wrap-select-customer #main .form .field-new-customer label,
        .wrap-select-customer #main .form .field-registered-customer label {
          display: flex;
          align-items: center; }
      .wrap-select-customer #main .form .field-new-customer {
        display: contents; }
        .wrap-select-customer #main .form .field-new-customer > .item {
          display: contents; }
    .wrap-select-customer #main .button {
      grid-column: span 2;
      text-align: center; }
      .wrap-select-customer #main .button .btn {
        background-color: #47aa50; }

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