/*
==========================================================================
    Chimps Room Analytic
==========================================================================
*/
.room-analytics {
  font-family: $base-font;
  position: relative;
  z-index: 0;
  .content {
    padding: 10px 15px 0 15px;
    overflow: hidden;
  }
  .top-action-area { margin-bottom: 5px; }
  .new-title-bar { height: 28px; }
  /* criteria-report */
  .criteria-report {
    width: 1048px;
    .report-row { @media (max-width: 800px) {display: block; } }
    .form-group-calendar { margin-right: 19px; }
    .form-group { float: left; label { float: left; padding: 3px 10px; margin: 0; } }
    .yearselect {
      float: left;
      width: 80px;
      margin-right: 10px;
    }
    .impactEventSelect { width: 183px; }
    .report-row--comparative .mars-select,
    .report-row--filter .mars-select {
      label { width: 94px; padding: 3px 10px; }
      &:first-child label { width: 130px; }
      .multiselect-native-select {
        float: left;
        width: 183px !important;
      }
    }
    @media (max-width: 667px) {
      .form-group {
        float: none !important;
        margin-top: 5px;
      }
    }
    .report-row--filter {
      .segmentsSelect label { width: auto; }
      @media (min-width: 668px) and (max-width: 1078px) {
        .segmentsSelect { float: none; &::before { content: ''; display: table; clear: both; height: 5px; } }
      }
    }
    .lastsubmitted {
      width: 150px;
      position: relative;
      ul {
        width: 150px;
        margin: 0;
        border: 1px solid color("silver");
        position: absolute;
        top: 26px;
        left: 0;
        display: none;
        max-height: 120px;
        overflow: hidden auto;
        &.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;
      }
    }
    .lastsubmittedtoggle {
      min-height: 0;
      span { margin-left: 240px !important; }
    }
    .rangesliderbox { width: 266px !important; margin-right: 0 !important; }
  }
  .display-report {
    display: none;
    width: 758px;
    .report-row { @media (max-width: 600px) { display: block; } }
    .report-row--statistics .mars-select {
      label { width: auto; padding: 3px 10px; float: left; margin-bottom: 0; }
      &:first-child label { width: 130px; }
      .multiselect-native-select {
        float: left;
        width: 183px !important;
        label { float: none; }
      }
    }
    @media (max-width: 788px) {
      .form-group {
        float: none !important;
        margin-top: 5px;
      }
    }
  }

  /* criteria-bread-crumb */
  .criteria-bread-crumb .breadcrumb-list.breadcrumb-label ol li:first-child {
    background: color("pattens-blue-2");
    &::after { border-left: 10px solid color("pattens-blue-2"); }
  }

  /* table */
  .table-responsive {
    margin-top: 5px;
    overflow: scroll !important;
    max-height: inherit;
    height: 372px;
    @media (min-width: 768px) { height: 715px; }
    @media (min-width: 1024px) { height: 322px; }
    @media (min-width: 1280px) { height: 715px; }
    @media (min-width: 1366px) { height: 459px; }
    @media (min-width: 1400px) { height: 741px; }
    @media (min-width: 1440px) { height: 591px; }
    @media (min-width: 1600px) { height: 591px; }
    @media (min-width: 1680px) { height: 741px; }
    @media (min-width: 1920px) { height: 771px; }
  }

  /* sortTableColumn */
  .commonTable {
    margin-bottom: 0;
    .icon-collapse {
      position: absolute;
      left: 10px;
      top: 0;
      i { height: 19px; }
      padding: 2px 0;
      display: block;
      float: left;
    }
    .btn-drag {
      height: 23px;
      width: 23px;
      padding: 0;
      display: block;
      position: absolute;
      left: 1px;
      top: 0;
      cursor: pointer;
      background-color: color("light-cyan");
      i {
        position: relative;
        height: 23px;
        width: 23px;
        display: block;
      }
    }
    tr {
      th, td {
        min-width: 84px;
        max-width: 84px;
      }
      th { height: 25px; padding: 2px 10px !important; }
      td { padding: 3px 10px !important; }
      .fixcell {
        min-width: 156px;
        max-width: 156px;
        padding-left: 10px !important;
        text-align: left !important;
      }
      &:first-child th { position: relative; }
      th.bg-sky {  background: color("pattens-blue-2") !important; }
      &:first-child th.bg-sky { border-top: 1px solid color("pattens-blue-2") !important; }
      .borderd-right { border-right: 1px solid color("sapphire") !important; }
    }
    tr:first-child th:first-child { padding: 0 0 !important; }
    .trHead {
      th, td { padding: 0 10px !important; height: 22px !important; }
      .fixcell { padding-left: 35px !important; }
    }
    .trSubHead .fixcell { padding-left: 35px !important; }
    .tatalSubHeader td { font-family: $base-font !important; }
  }

  .mars-change-aware-table {
    .trLinkWater {
      .et-cell-content span span {
        font-family: SourceSansProBold;
      }
    }
    .category-bar-color {
      background: #D8DBEC !important;
     }
  }

  .ember-table.mars-ember-table{
    .is-first-column{
      .et-cell-container{
        text-align: left;
        padding-left: 22px;
      }
    }
  }

  .ra-chi-replace {
    background: #98bad6 url(../images/chi-replace-bg.svg) no-repeat left center !important;
    background-size: 24px 22px !important;
  }

  .ra-chi-replace div{
    @include text-with-ellipsis();
  }

  .draggableColumn span{
    padding-left: 15px;
  }

  .ember-table .et-reorder-main-indicator th {
    background: #e9f4fc url(../images/chi-replace-bg.svg) no-repeat left center !important;
    background-size: 24px 22px !important;
  }

  .errorAlertPosition {
    z-index: 1;
    top: -1px;
    display: block;
    width: 325px;
  }

  .content .auto-height{
    height:540px !important;
  }

  .mars-radio.active label input[type="radio"] + .cr > i { opacity: .55; }
  .mars-radio label input[type="radio"]:checked + .cr > i { opacity: .55; }

  .commonDisplayCriteria .form-group-calendar .reportpopup {
    top: 195px;
  }

  .commonDisplayCriteria .form-group-calendar .reportpopup .report-row {
    display: block;
    grid-template-columns: unset;
    grid-column-gap: unset;
    margin-top: 4px;
    height: 218px;
  }

}