zcloud-gbs-emergencyRescue-react/src/pages/Container/Enterprise/EmergencyRescue/Rescue/Command/index.less

.command {
  background-color: #E5EDFD;
  margin: -20px -20px -31px -20px;

  .top {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 66px;
    width: 100%;
    font-size: 36px;
    color: #fff;
    text-align: center;
    line-height: 66px;
    font-weight: bold;
  }

  .select-emergency-plan {
    border-radius: 0 0 4px 4px;
    background-image: linear-gradient(to bottom, #DAE9FA, #CFE5FF);
    padding: 10px;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to top, #FFFFFF, #D1E1F9) 1;

    .container {
      border-radius: 2px;
      background-color: #E4F0FF;
      border-width: 2px;
      border-style: solid;
      border-image: linear-gradient(to top, #FFFFFF, #D9EFFD) 1;
      box-shadow: inset 0 0 3px 0 rgba(49, 122, 202, 0.48);
      padding: 15px;
    }
  }

  .command-feedback-records {
    margin-top: 10px;
    border-radius: 0 0 4px 4px;
    background-image: linear-gradient(to bottom, #DAE9FA, #CFE5FF);
    padding: 10px;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to top, #FFFFFF, #D1E1F9) 1;

    .title {
      img {
        width: 18px;
        height: 18px;
      }

      span {
        padding-left: 6px;
        color: #222222;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .container {
      padding-left: 20px;

      .timeline-item {
        position: relative;
        padding-left: 20px;
        margin-top: 10px;

        &::before {
          content: '';
          position: absolute;
          left: 10px;
          top: 0;
          bottom: -10px;
          width: 2px;
          background-color: #5B8CFF;
        }

        &:last-child::before {
          bottom: 0;
        }

        .timeline-dot {
          position: absolute;
          left: 6px;
          top: 15px;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 2px solid #5B8CFF;
          background-color: #fff;
          z-index: 1;
        }

        .parent {
          .timeline-dot {
            top: 15px;
          }
        }
      }

      .parent, .child {
        margin-top: 10px;
        border-radius: 2px;
        background-color: rgb(255 255 255 / 0.41);
        border-width: 1px;
        border-style: solid;
        border-image: linear-gradient(to top, #FFFFFF, #D9EFFD) 1;
        padding: 10px;

        .label {
          color: #666666;
          font-size: 14px;
        }
      }
    }
  }

  .non-contingency-instructions {
    border-radius: 0 0 4px 4px;
    background-image: linear-gradient(to bottom, #DAE9FA, #CFE5FF);
    padding: 5px;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to top, #FFFFFF, #D1E1F9) 1;

    .title {
      img {
        width: 18px;
        height: 18px;
      }

      span {
        padding-left: 6px;
        color: #222222;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .container {
      .subtitle {
        margin-left: 10px;
        color: #3B445C;
        font-size: 14px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: -10px;
          top: 7px;
          bottom: 0;
          width: 3px;
          height: 13px;
          background-color: #3796FF;
        }
      }

      .table {
        font-size: 13px;
        margin-top: 5px;
        text-align: center;

        .header {
          font-weight: bold;
          display: grid;
          grid-template-columns: 0.8fr 1fr 1fr 0.6fr;

          .title {
            color: #3B445C;
            border: 1px solid #fff;
            background-color: #C4E2F8;
          }
        }

        .body {
          border-top: none !important;

          .row {
            display: grid;
            grid-template-columns: 0.8fr 1fr 1fr 0.6fr;

            .cell {
              border: 1px solid #fff;
            }
          }
        }
      }
    }
  }

  .event-handling-records {
    margin-top: 10px;
    border-radius: 0 0 4px 4px;
    background-image: linear-gradient(to bottom, #DAE9FA, #CFE5FF);
    padding: 5px;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to top, #FFFFFF, #D1E1F9) 1;

    .title {
      img {
        width: 18px;
        height: 18px;
      }

      span {
        padding-left: 6px;
        color: #222222;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .container {
      margin-top: 10px;

      .time {
        color: #222222;
        font-weight: bold;
      }

      .content {
        color: #444444;
      }

      .timeline-item {
        position: relative;
        padding-left: 20px;
        margin-top: 10px;

        &::before {
          content: '';
          position: absolute;
          left: 10px;
          top: 0;
          bottom: -10px;
          width: 2px;
          background-color: #5B8CFF;
        }

        &:last-child::before {
          bottom: 0;
        }

        .timeline-dot {
          position: absolute;
          left: 6px;
          top: 7px;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 2px solid #5B8CFF;
          background-color: #fff;
          z-index: 1;
        }
      }
    }
  }

  .cesium {
    .form {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 1;
      width: 100%;

      label {
        color: #fff;
      }
    }

    .mark-options {
      display: flex;
      justify-content: space-around;
      gap: 25px;
      position: absolute;
      width: 100%;
      bottom: 0;

      &-item {
        text-align: center;
        cursor: pointer;
        padding: 10px;
        width: 194px;
        height: 48px;
        color: #3796FF;
        font-size: 16px;
        font-weight: bold;
        position: relative;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        &-children {
          position: absolute;
          bottom: 55px;
          left: 50%;
          transform: translateX(-50%);
          background-color: #D3E7FF;
          width: 80%;
          padding: 10px;
          border-radius: 0 0 4px 4px;
          border-width: 1px;
          border-style: solid;
          border-image: linear-gradient(to top, #1F89E3, #A2C3EA) 1;

          &-item {
            text-align: center;
            cursor: pointer;
            padding: 5px;
            font-size: 14px;
            font-weight: normal;
            color: #000;
            border: 1px solid transparent;

            &.active{
              color: #fff;
              background-color: #3796FF;
              border-radius: 0 0 4px 4px;
              border-width: 1px;
              border-style: solid;
              border-image: linear-gradient(to top, #1F89E3, #A2C3EA) 1;
            }
          }
        }
      }
    }
  }
}