page-tools-log-clustering {
  display: block;

  main {
    background: white;
    padding: 12px;
    height: 100%;

    .condition-screen {
      display: block;
      text-align: center;

      .condition-date-box {
        display: inline-block;

        .input-group {
          width: 500px;

          #dateTime {
            width: 220px;
            text-align: center;
            color: rgba(97, 97, 97, 1);
          }
        }
      }

      .condition-input-box {
        height: 44px;
        width: 500px;
        margin: 0 auto;
      }
    }

    .table-message-hint {
      padding-top: 20px;
      margin-top: -20px;

      label {
        display: inherit;
        padding: 0 0 5px 2px;
        color: #000;
      }
    }

    table {
      tr {
        &.table-no-results {
          line-height: 3rem;
          font-size: 14px;
        }

        th {
          text-align: center;
        }

        td {
          text-align: center;

          &.data-type-td {
            position: relative;

            .block-mark {
              width: 12px;
              height: 30px;
              position: absolute;
              left: 0;
              top: 0;

              &.block-mark-new {
                background: #00C8C1;
              }

              &.block-mark-flu {
                background: #5E6BED;
              }
            }

            .data-type {
              padding-left: 6px;
            }
          }

          .fa {
            cursor: pointer;
          }

          .fa-long-arrow-up {
            color: red;
            font-weight: bold;
            font-size: 16px;
          }

          .fa-search-plus {
            font-size: 15px;
          }

          .log-row-btn {
            background: #F7F6F6;
            text-align: center;
          }
        }

        td:first-child, td:nth-child(4) {
          text-align: left;
        }

        .large-cell {
          width: 55%;
          min-width: 300px;
          text-align: left;
        }

        .small-cell {
          width: 90px;
        }

        .min-cell {
          width: 60px;
        }
      }

      .logs-child-tr {
        background: #FFF !important;

        .log-row-td {
          padding: 0;

          div {
            height: 30px;
            line-height: 30px;
          }
        }

        .logs-child-td {
          padding-left: 22px;
        }
      }

      .temp-td {
        text-align: center !important;
      }
    }

    hr {
      margin: 0;
    }

    .uib-datepicker-popup {
      li {
        button {
          &.uib-datepicker-current {
            background-color: #00C8C1 !important;
            color: white !important;
            border-color: #00C8C1 !important;

            &:focus {
              background-color: #00C8C1 !important;
            }
          }

          &.uib-close {
            background-color: #E6E6E6;
            color: #616161 !important;
            border-color: #E6E6E6 !important;

            &:focus {
              background-color: #CECECE !important;
            }
          }
        }
      }

      td {
        text-align: center !important;
      }
    }
  }

  .no-data {
    padding: 50px 0;
  }

  .loading {
    opacity: 0.6;
    cursor: wait !important;
  }

  .eChart {
    height: 450px;
    padding: 20px 0 10px 0;
  }
}

[data-page=logClustering] {
  .no-data {
    text-align: center;

    .invalid-box {
      display: inline-block;
    }

    .invalid-icon {
      width: 100px;
      height: 100px;
      background: url(/images/poc/invalid-icon.svg) no-repeat center;
    }
  }

  .inline-variable {
    color: blue;
  }

  .inline-date {
    color: #888;
  }

  .inline-mark {
    background: yellow;
    float: none !important;

    &:hover {
      background: none !important;
    }
  }

  .oracle-error {
    cursor: pointer;
    color: #FF9800;
  }

  .oracle-error:hover {
    background: #EEEEEE;
  }

  .eChart {
    height: 450px;
    width: 100%;
    padding: 20px 0 10px 0;
  }

  .oracle-errors-template {
    padding: 0;
    margin: 0;

    ul {
      display: block;
      width: 100%;
      color: #000;
      font-family: Droid Sans Mono,Consolas,Monaco,Courier New,Courier,monospace !important;

      li {
        width: 100%;
        display: flex;
        padding: 0 0 15px 15px;

        &.important-li {
          padding-left: 0px;

          label {
            width: 70px;
          }
        }

        span {
          display: block;
          width: 100%;
          word-break: break-all;
        }
      }
    }
  }

  .modal-dialog{
    animation-fill-mode: inherit !important;
    animation-name: animation-open !important;
    margin-bottom: 0px;

    dialog-notifications {
      #modal-body {
        margin: 0;

        p {
          max-height: 500px;
          overflow-y: auto;

          div {
            display: flex;
            margin-bottom: 15px;
            text-align: left;

            &.current {
              color: red !important;
            }

            span {
              float: left;
              max-width: 715px;

              &.time-span {
                width: 150px;
              }

              &:hover {
                background: rgba(224, 224, 224, 1) !important;
              }

              &.inline-mark {
                float: none !important;
              }
            }
          }

          .group-box:hover {
            background: rgba(244, 244, 244, 1);
          }
        }
      }
    }
  }

}