record-app {
  display: block;

  .warning-navbar {
    display: flex;
    padding: 0;
    justify-content: space-between;
  }

  .alarm-critical {
    color: var(--pageWarning-critical-color, #EA4B55) !important;
  }

  .alarm-warning {
    color: #F5A623 !important;
  }

  .alarm-info {
    color: var(--pageWarning-info-color, #00C8C1) !important;
  }

  .alarmbg-info {
    background: var(--pageWarning-info-color, #00C8C1);
  }

  .alarmbg-critical {
    background: var(--pageWarning-critical-color, #EA4B55);
  }

  .alarmbg-warning {
    background: #F5A623;
  }

  .border-critical {
    border: 2px solid var(--pageWarning-critical-color, #EA4B55) !important;
  }

  .border-warning {
    border: 2px solid #F5A623 !important;
  }

  .border-info {
    border: 2px solid var(--pageWarning-info-color, #00c8c1) !important;
  }

  .warning-icon {
    width: 20px;
    font-size: 20px;
    margin-right: 5px;
    text-align: center;
    vertical-align: middle;
  }

  .status-list {
    background-color: white;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;

    ul {
      background: linear-gradient(to bottom, #FFF, #F3F3F3);
      margin: 0;
      display: flex;
      width: 47%;

      li {
        height: 78px;
        flex: 1;
        border: solid 1px #D5D5D5;
        border-right: solid 1px #D5D5D5;
        margin: 0;

        .search-label {
          width: 100%;
          height: 100%;
          padding: 6px 10px;
          cursor: pointer;
          position: relative;

          span {
            color: #646464;
          }

          .font-number {
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
            line-height: 30px;
            background: transparent;
          }
        }

        .search-label-input {
          input[type=checkbox]:checked {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            vertical-align: top;
          }

          i {
            color: #fff;
            font-size: 1px;
            position: absolute;
            z-index: 999;
            left: 10px;
            top: 10px;
          }
        }
      }
    }
  }

  .record-show {
    width: 100%;
    max-height: 130px;
    overflow-y: auto;
    position: absolute;
    z-index: 9999;
    color: #444;
    background: white;
    border: 1px solid #ccc;
    border-top: none;

    li {
      padding: 5px 10px;

      &:hover {
        background: var(--global-theme-color-light, #04beb4);
        color: #fff;
      }
    }
  }

  .search-form {
    flex: 1;
    display: flex;
    height: 36px;
    margin-right: 12px;

    div {
      flex: 1;
      position: relative;
    }

    select {
      width: 120px;
      margin-right: 12px;
    }

    .form-control {
      height: 100%;
    }

    input {
      border-radius: 4px;
    }
  }

  thead {
    background: linear-gradient(to bottom, #FFF, #F3F3F3) !important;
  }

  tbody tr:hover {
    background: var(--pageWarning-trHover-bgColor, #E0EBEC);
  }
}