@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);
      .co-transaction-lines-side-panel {
        padding: 0;
      }
    }
    .service-message-extra-wrapper {
      display: flex;
      flex-direction: row;
      gap: 5px;
      margin: 0 0 15px 0;
      .co-list-of-values {
        flex: 1;
        margin-left: -10px;
        &: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;
          }
        }
      }
    }
    .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: 30px;
        width: 100%;
        align-self: 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;
          .activity-task-creator-wrapper {
            flex: 1;
          }
          .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;
            }
          }
          .co-component-activity-list {
            padding: 0;
          }
          .activity-list-content {
            height: auto;
            .activity-tab-content {
              overflow: visible;
              .co-collapsible {
                overflow: visible;
                .collapsible-content {
                  overflow: visible;
                  display: flex;
                  flex-direction: column;
                }
              }
            }
          }
        }
        .co-activity-list {
          padding: 0;
          display: block;
          width: 100%;
          margin-top: 15px;
          .activity-display-content {
            padding: 0;
          }
        }
        .activity-wrapper {
          max-height: 388px;
          overflow: auto;
        }
        .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-wrapper {
            display: flex;
            gap: 10px;
            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;
            flex-direction: column;
            .service-message {
              display: flex;
              flex-direction: column;
              gap: 10px;
              width: 100%;
            }
            .transaction-service-message {
              min-height: 80px;
              .co-input-text {
                height: 100%;
              }
              .co-input-textarea {
                .input-textarea-wrapper {
                  height: 100%;
                  display: flex;
                  width: 100%;
                }
                textarea {
                  height: 100%;
                  margin: 15px 0 0 0;
                  padding: 5px;
                  min-height: 80px;
                }
                &.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;
          }
          .uploaded-images-wrapper {
            display: flex;
            max-width: 100%;
            gap: 15px;
            overflow: auto;
            .co-image {
              height: 80px;
              width: 80px;
            }
          }
        }
        .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 {
            background: transparent;
            box-shadow: none;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
            &:hover {
              background: transparent;
            }
            .overview-wrapper-date {
              .date-wrapper {
                align-items: center;
              }
            }
            .overview-main {
              max-width: 500px;
            }
            &.bottom-task {
              order: 2;
              border-radius: 5px;
              background-color: #FFFFFF;
              padding: 15px;
              color: #000;
              box-shadow: none;
              margin-top: 15px;
              box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
              .overview-task-wrapper {
                .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;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
