@include export-module('cc-transaction-service-overview-layout') {
  .co-transaction-service-overview {
    width: 100%;
    height: 100%;
    display: flex;
    .service-order-lines-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
      background: #FFF;
      .co-transaction-lines-side-panel {
        padding: 0;
        .co-transaction-lines-side-panel-service-order {
          .full-details-wrapper {
            .show-details-wrapper {
              display: flex;
              gap: 15px;
              justify-content: space-between;
              .details-wrapper {
                background: #f8f8fa;
                padding: 10px;
                border-radius: 8px;
                flex: 1;
              }
            }
            .details-wrapper {
              .details-display {
                gap: 5px;
                flex-direction: column;
                .detail {
                  flex-direction: row;
                  gap: 5px;
                  label, span {
                    font-size: 11px;
                    color: #000;
                  }
                }
              }
              .art-amount-batch {
                display: none;
              }
              .article-description {
                width: 100%;
                padding-right: 100px;
              }
              .image-display {
                max-width: 80px;
                height: 40px;
                position: absolute;
                top: -30px;
                right: 0;
                .no-image {
                  .no-image-label {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
    .service-message-extra-wrapper {
      display: flex;
      flex-direction: column;
      gap: 15px;
      width: 15%;
      min-width: 200px;
      padding-left: 15px;
      border-left: 1px solid #ececec;
      .co-list-of-values {
        &:before {
          box-shadow: none;
        }
        .input-wrapper {
          .input-text-clear-button {
            display: none;
          }
        }
        .input-text-right-icon {
          display: none;
        }
        &.cc-input-focused {
          &:before {
            box-shadow: inset 0 0 0 1px #1A73E8;
          }
          .input-wrapper {
            .input-text-clear-button {
              display: flex;
            }
          }
          .input-text-right-icon {
            display: flex;
          }
        }
        label {
          text-transform: uppercase;
          font-size: 10px;
          color: #000;
        }

      }
    }
    .service-overview-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      .co-dialog {
        .co-dialog-wrapper {
          height: 650px;
        }
      }
      .message-and-task-wrapper {
        display: flex;
        gap: 15px;
        width: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
        .activity-header {
          font-size: 14px;
          font-weight: bold;
          color: #171721;
          position: relative;
        }
        .activity-list-component-wrapper {
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 30px;
          flex: 1;
          align-self: flex-start;
          width: 100%;
        }
        .activity-task-creator-wrapper {
          display: flex;
          gap: 15px;
          flex-direction: column;
          width: 400px;
          max-width: 100%;
          .activity-task-overview-wrapper {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
            co-component-activity-list {
              .activity-wrapper {
                max-width: 100%;
                max-height: 100%;
                padding: 0;
              }
            }
          }
        }
        .activity-list-conv-wrapper {
          flex: 1;
          padding-left: 0px;
          .activity-display {
            width: 100%;
          }
          .history-label {
            font-size: 14px;
            font-weight: bold;
            color: #171721;
            position: relative;
          }
          .activity-list-wrapper {
            .activity-display-content {
              .activity-display-footer {
                padding: 0;
                .activity-fired-triggers {
                  .activity-fired-trigger {
                    background: #FFF;
                    border: 1px solid #5fdcb3;
                    span {
                      color: #5fdcb3;
                    }
                  }
                }
              }
            }
          }
        }
        .co-component-activity-list {
          padding: 0;
        }
        .activity-list-content {
          height: auto;
          .activity-tab-content {
            overflow: visible;
            flex-direction: column-reverse;
            .activity-wrapper-inner {
              order: 1;
              &.bottom-task {
                order: 2;
                display: flex;
                gap: 5px;
                margin-top: 10px;
                flex-wrap: wrap;
                max-height: 300px;
                overflow: auto;
                co-component-activity-overview {
                  .activity-icon {
                    display: none;
                  }
                  .task-box {
                    .co-button {
                      border: 1px solid #1b2874;
                      background: #1B28741A;
                      color: #1b2874;
                      justify-content: center;
                      align-items: center;
                      height: 32px;
                      min-width: 150px;
                      width: 100%;
                      span {
                        text-align: center;
                        font-size: 11px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .activity-list-wrapper {
          align-items: flex-start;
          flex-direction: column-reverse;
        }
        .activity-list-conv-wrapper {
          max-height: 300px;
          overflow: auto;
        }
        .co-activity-list {
          padding: 0 0 30px 0;
          display: block;
          width: 100%;
          margin-top: 15px;
          .activity-display-content {
            padding: 0;
            .activity-display-body {
              .activity-icon {
                min-width: 30px;
                background-color: transparent !important;
              }
            }
          }
        }
        .activity-wrapper {
          max-height: 388px;
          overflow: auto;
          width: 100%;
          padding: 10px 15px;
            &.activity-status-change {
              width: 100%;
              background: #ececec;
              padding: 10px 30px;
              box-shadow: none;
              .activity-display {
                flex-direction: row-reverse;
                justify-content: space-between;
                .activity-icon, .activity-display-footer {
                  display: none !important;
                }
                .activity-display-title {
                  span {
                    color: #6e6e6e;
                    text-transform: uppercase;
                  }
                }
                .activity-display-body {
                  span {
                    text-transform: uppercase;
                    font-size: 11px;
                  }
                }
              }
            }
        }
        .service-message-and-image-wrapper {
          display: flex;
          flex-direction: column;
          gap: 30px;
          padding: 0 0 15px 0;
          margin-bottom: 15px;
          flex: 1;
          align-self: flex-start;
          .service-message-image-inner {
            display: flex;
            gap: 30px;
            flex: 1;
            justify-content: space-between;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
            overflow: auto;
            background: #FFF;
            .service-message-wrapper {
              display: flex;
              flex-direction: column;
              gap: 15px;
              width: 85%;
            }
            .service-message {
              display: flex;
              flex-direction: column;
              gap: 10px;
              width: 100%;
            }
            .wizard-container {
              display: flex;
            }
            .wizard-column {
              display: flex;
              flex-direction: column;

            }
            .wizard-line {
              white-space: break-spaces;
              margin-right: 15px;
              padding: 5px 20px;
              border-radius: 15px;
              background: #f8f8fa;
              max-width: 300px;
              &:first-child {
                display: none;
              }

            }
            .transaction-service-message {
              min-height: 40px;
              .co-input-text {
                height: 100%;
              }
              .co-input-textarea {
                &:before {
                  display: none;
                }
                .input-textarea-wrapper {
                  height: 100%;
                  display: flex;
                  width: 100%;
                }
                textarea {
                  height: 100%;
                  margin: 15px 0 0 0;
                  padding: 5px;
                  min-height: 40px;
                }
                &.cc-input-focused {
                  &:before {
                    box-shadow: inset 0 0 0 1px #1A73E8;
                  }
                  textarea {
                    margin: 15px 0 0 0;
                    padding: 0 0 5px 10px;
                  }

                }
              }
            }
            .service-label {
              font-size: 12px;
              font-weight: 500;
              color: #8083A3;
            }
            span {
              font-size: 10px;
              white-space: break-spaces;
            }
          }

          .co-files-upload {
            min-height: auto;
            overflow-x: auto;
            display: block;
            .co-drag-drop-container {
              padding-top: 30px;
              position: relative;
              margin-top: 0;
              gap: 15px;
              align-items: flex-start;
              flex-direction: row;
              .add-file {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                .co-tile-render {
                  display: flex;
                  align-items: center;
                  flex-direction: row-reverse;
                  .add-button {
                    position: unset;
                  }
                }
                .description {
                  font-weight: 500;
                  font-size: 12px;
                  color: #8083A3;
                }
                svg {
                  path {
                    fill: #1A73E8;
                  }
                  path + path {
                    display: none;
                  }
                }
                .co-icon {
                  width: 40px;
                  height: 40px;
                }
              }
              .add-dropzone {
                position: relative;
                top: 0px;
                z-index: 1;
              }
              .tile {
                padding: 0;
                border: none;
                height: 100%;
                width: auto;
                .info {
                  max-width: 100px;
                  .description {
                    font-size: 10px;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
                .trash {
                  width: 15px;
                  height: 15px;
                  padding: 0;
                  background: none;
                  top: 5px;
                  right: 5px;
                  display: none;
                }
                &:hover {
                  .trash {
                    display: block;
                  }
                }
              }
            }
          }
          .image-display {
            width: 20%;
          }
          co-app-file-dropzone {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: #FFF;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
            z-index: 999999;
            border: 1px dotted #ccc;
            border-radius: 15px;
            padding: 15px;
            .description {
              display: flex;
              flex-direction: column;
              gap: 10px;
              align-items: center;
              justify-content: center;
            }
          }
          .service-upload {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            min-width: 180px;
            .files-upload-wrapper {
              co-drag-drop-container {
                display: flex;
                padding: 5px;
                border: 1px solid #ececec;
                border-radius: 15px;
                .upload-add-wrapper {
                  flex-direction: row;
                  gap: 0;
                  .co-tile-render {
                    width: 26px;
                    height: 26px;
                    border: none;
                    padding: 0;
                    .image, .info {
                      display: none;
                    }
                    .plus-add-button {
                      position: relative;
                      top: 0;
                      .add-button {
                        width: 16px;
                        height: 16px;
                        svg {
                          fill: #000;
                        }
                      }
                      span {
                        display: none;
                      }
                    }
                  }
                }

              }
            }

          }
          .uploaded-images-wrapper {
            display: flex;
            max-width: 100%;
            gap: 15px;
            overflow: auto;
            .co-file-upload {
              max-width: 60px;
              .trash {
                width: 14px;
                height: 14px;
                right: 10px
              }
            }
            .co-image {
              height: 30px;
              max-width: 60px;
              img {
                object-fit: contain;
              }
            }
            .info {
              display: flex;
              flex-direction: column;
              .description {
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
        .task-button-wrapper {
          display: flex;
          flex-direction: row;
          gap: 10px;
          justify-content: center;
        }
        .co-component-activity-list {
          margin: 0;
          height: auto;
          padding: 0;
          .collapsible-header {
            display: none;
          }
          .overview-wrapper-labels {
            .activity-context-title {
              font-size: 12px;
            }
          }
          .co-component-activity-overview {
            order: 1;
            width: 100%;
            &:hover {
              background: transparent;
            }
            .overview-wrapper-date {
              .date-wrapper {
                align-items: center;
              }
            }
            .overview-main {
              max-width: 100%;
              .activity-buttons {
                .co-button {
                  width: 50%;
                  border: 1px solid #1a73e8 !important;
                  color: #1a73e8 !important;
                  background: #FFF !important;
                  text-align: center;
                  padding: 5px 10px;
                  justify-content: center;
                  height: 32px;
                  max-width: calc(50% - 3px);
                  span {
                    color: #1A73E8;
                    font-weight: normal;
                    font-size: 11px;
                  }
                }
              }
              .activity-label {
                .label {
                  font-size: 12px;
                }
              }
            }
            .overview-current {
              .activity-label {
                .label {
                  font-size: 12px;
                }
              }
            }
            &.bottom-task {
              order: 2;
              width: calc(50% - 3px);
              .overview-task-wrapper {
                .inner-task-box {
                  position: absolute;
                  max-height: 0;
                  overflow: hidden;
                  visibility: hidden;
                  transition: max-height 0.3s ease-in-out;
                  top: 32px;
                  left: 0;
                  width: 100%;
                  background-color: #212437;
                  z-index: 2;
                  .co-button {
                    cursor: pointer;
                    padding: 5px;
                    border-radius: 0;
                    display: flex;
                    align-items: center;
                    column-gap: 10px;
                    background: #2e3350 !important;
                    border: none !important;
                    span {
                      color: #FFF;
                    }
                  }
                  .open-task {
                    cursor: pointer;
                    padding: 5px;
                    border-radius: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    column-gap: 10px;
                    background: #2e3350;
                    border: none;
                    color: #FFF;
                    text-align: center;
                    width: 100%;
                    height: 32px;
                    font-size: 11px;
                  }
                }
                .task-box {
                  display: flex;
                  flex-direction: column;
                  gap: 5px;
                  position: relative;
                  cursor: pointer;
                  width: 100%;
                  .overview-wrapper-date {
                    position: absolute;
                    top: -5px;
                    right: 0px;
                  }
                  .task-current-state {
                    padding-right: 100px;
                  }
                  &.active {
                    .inner-task-box {
                      max-height: 200px;
                      visibility: visible;
                      overflow: visible;
                      transition: max-height 0.3s ease-in-out;
                    }
                  }
                }
              }
            }
            .overview-current {
              .activity-title {
                background: #d1e3fa;
                border: 1px solid #1a73e8;
                color: #1a73e8;
                padding: 7px 15px;
                text-transform: uppercase;
                height: 32px;
                justify-content: center;
                align-items: center;
                display: flex;
                font-size: 11px;
              }
            }
          }
        }
      }
    }
    .co-task-creator {
      bottom: 0;
      background: #FFF;
      z-index: 2;
      margin-top: 10px;
      .extras-buttons {
        padding: 5px 10px;
        .co-button {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}