/*
==========================================================================
    Other Income trend report
==========================================================================
*/
.other-income-trend {
  .content {
    padding: 20px 15px 0 15px;
  }

  .top-action-area {
    margin-bottom: 5px;

    .checkoptionarea {
      flex-grow: 1;
      float: left;
      background: #F2F2F2 !important;

      span.lastEdited {
        padding: 5px;
        position: relative;
        float: right;
      }
    }
  }

  .gotoselectarea {
    margin: 2px 0 0 10px !important;

    .btn-group .multiselect {
      font-size: $medium;
      height: 30px;
      margin-top: -2px;
    }
  }

  #report.commonDisplayCriteria .form-group-calendar .timeselect, .commonDisplayCriteria .form-group-calendar .timeselect {
    width: 270px;
  }

  /* new change */
  .btn-summary {
    width: $icon-large !important;
    background-image: none !important;
    margin-left: 10px;
  }

  .btn-export {
    width: auto;
    height: $icon-large;
    padding: 4px 10px 0 35px !important;
    margin-left: 10px;
    text-decoration: none;
    line-height: inherit;
    color: color("black2");
    background-color: color("white-smoke-2") !important;
    position: relative;
    @include border-radius(0);

    i {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .text-bold {
    font-family: $base-font-semibold !important;
  }

  .commonDisplayCriteria {
    width: 740px;
    overflow: visible;
    margin-top: 5px;
    display: block;
    z-index: 5;

    .report-row--filter {
      .mars-select {
        margin-right: 10px;

        label {
          width: 94px;
          padding: 3px 10px;
          margin-bottom: 0;
        }

        &:first-child label {
          width: 110px;
        }

        .multiselect-native-select {
          float: left;
          width: 183px !important;
        }
      }

      .daysofweek-select {
        label {
          float: left;
        }

        margin-right: 0;
      }
    }

    .report-row--primarydata {
      .lastsubmittedtoggle {
        span {
          margin-left: 240px !important;
          width: 215px;
        }
      }

      .fcstsessionstoggle {
        span {
          margin-left: 390px !important;
        }
      }
    }

    .report-row--comparisondata {
      .lastsubmittedtoggle {
        span {
          margin-left: 360px !important;
          width: 215px;
        }
      }

      .fcstsessionstoggle {
        span {
          margin-left: 510px !important;
        }
      }
    }

    @media (max-width: 667px) {
      .form-group {
        float: none !important;
        margin-top: 5px;
      }
    }

    .lastsubmitted,
    .fcstsessions {
      width: 150px;
      position: relative;

      ul {
        width: 160px;
        margin: 0;
        border: 1px solid silver;
        position: absolute;
        top: 26px;
        left: 0;

        &.active {
          display: block;
        }
      }

      li {
        height: unset; // style from style.css
        line-height: unset; // style from style.css
        @include text-with-ellipsis();
        padding: 3px 10px;
        background-color: color("white");
        cursor: pointer;

        &.active {
          background: color('white') url(../images/chi-tic.svg) no-repeat 98% center !important;
          -webkit-background-size: 12px auto !important;
          background-size: 12px auto !important;
        }
      }
    }

    .lastsubmittedtoggle,
    .fcstsessionstoggle {
      min-height: 0;
    }

    .form-group-calendar {
      overflow: visible;

      .multiselect-container li.disabled {
        display: none !important;
      }

      .reportpopup-content {
        background: color("white");
      }

      .rowoverflowvisible,
      .defaultviewsection {
        .mars-select {
          width: 265px;
          max-width: 100%;
          float: left;
        }

        .reportrowtitle {
          width: 155px;
          float: left;
        }

      }

      .reportpopup {
        height: 286px;
        overflow: visible;

        .report-row {
          height: auto;
        }

        .report-row.radio-row {
          grid-template-columns:unset;
        }

        .report-row .reportrowcontent span:first-child {
          width: 100%;
        }

        .defaultviewsection {
          display: block;
        }

        .input-group .form-control {
          font-size: $medium;
        }

        .daterange-row {
          display: block;
          grid-template-columns: unset;
          grid-column-gap: unset;
          margin-top: 4px;
          min-height: 218px;
          z-index: 0;
          position: relative;
        }
      }
    }
  }

  .other-income-trend-report-table {
    max-height: inherit;
    height: 382px;
    @media (min-width: 768px) {
      height: calc(100vh - 231px);
    }
    @media (min-width: 812px) {
      height: calc(100vh - 198px);
    }
    @media (min-width: 813px) {
      height: calc(100vh - 200px);
    }
    @media (min-width: 1201px) {
      height: calc(100vh - 198px);
    }

    td.is-fixed-left:nth-child(2) {
      background-color: #D4D9E8 !important;
    }
  }

  .commonTable {
    tr {
      th,
      td {
        &.fixcell {
          &:first-child {
            min-width: 195px !important;
            width: 195px !important;
            max-width: 195px !important;
          }

          .addBtn {
            padding: 1px 10px;
          }

          .btn-save,
          .btn-edit,
          .btn-close {
            margin: 0;
            height: 22px;
          }

          .btn-close {
            margin-left: 10px;
            background-color: transparent;
          }

        }

        &.overridecolumn {
          span {
            color: blue;
          }
        }
      }

      td.celledit {
        padding: 0 !important;

        input {
          border: 1px solid color('very-light-grey');
          font-size: 13px !important;
          text-align: center !important;
        }
      }
    }

  }

  .trend-report-table {
    table thead {
      .viewMode span {
        float: left;

        a.btn.btn-edit {
          margin: 2px 2px 0 0;
        }

        a.btn.btn-edit.btn-edit-daily {
          color: black;
          margin-left: 5px;
          width: 60px;
          margin-top: 1px;
          text-align: left;

          i {
            position: absolute;
            left: 47px;
            top: 0;
            margin-top: -2px;
          }
        }

        a.btn.btn-edit.btn-edit-total {
          color: black;
          margin-left: 5px;
          width: 60px;
          margin-top: 1px;
          text-align: left;

          i {
            position: absolute;
            left: 113px;
            top: 0;
            margin-top: -2px;
          }
        }
      }

      tr th {
        height: 25px;
      }
      span.btn-reset.active {
        margin-left: 10px;
      }
    }

    tbody tr .negativenumber {
      color: red !important;

      input[type="text"] {
        border-color: #131111 !important;

        &.showError {
          border-color: #f05352 !important;
        }
      }
    }

    input[type="text"] {
      border: 1px solid;
      width: 88px !important;
    }
  }

  .table-responsive {
    &.height-set2 {
      height: 382px;
      @media (min-width: 768px) {
        height: calc(100vh - 186px);
      }
      @media (min-width: 812px) {
        height: calc(100vh - 158px);
      }
      @media (min-width: 813px) {
        height: calc(100vh - 160px);
      }
      @media (min-width: 1201px) {
        height: calc(100vh - 158px);
      }
    }
  }

}