/*
==========================================================================
    rollup-criteria
==========================================================================
*/
.mars-popup.financial-settings-popup {
  top: 114px !important;
  height: 214px !important;
  .financial-settings-popup {
    z-index: 101;
    height: 224px !important;
    width: 710px !important;
    top: -10px;
    left: -10px;

    .financial-setting-criteria {
      max-width: 100% !important;
      width: 710px !important;
      left: 0 !important;
      right: 0;
      margin: 0 auto !important;

      .report-content--edit {
        .is-edit {
          display: block;
        }

        .is-save {
          display: none;
        }
      }

      .report-content--save {
        .is-edit {
          display: none;
        }

        .is-save {
          display: block;
        }
      }

      .data {
        padding: 3px 10px;
      }

      .colum-wrap,
      .radio-wrap,
      .column {
        @include flexbox();
      }

      .column .mars-select {
        width: 132px;

        .multiselect-container {
          min-width: unset;
          width: 100%;
        }
      }

      .mars-radio {
        float: unset;
        min-width: 132px;
      }

      .report-title {
        height: $icon-large;

        .btn-save,
        .btn-edit {
          width: $icon-large;
          height: $icon-large;
          position: absolute;
          top: 0;
          right: 45px;
        }
      }

      .report-content {
        background: $c-white;
        margin: 0; // style.css
        padding: 10px;
      }

      .reportrowcontent {
        .radio-highlight {
          width: 400px;

          label {
            float: left;
          }

          .form-control {
            width: 60px;
          }
        }

        .input-wrap {
          display: inline-flex;
          align-items: center;
          gap: 0 5px;
          font-style: normal;

          em {
            font-style: normal;
            margin: 0 5px;
          }
        }

        .data {
          &.data-highlight {
            padding: 0 10px;
          }

          .input-wrap {
            .data-input {
              height: 26px;
              display: block;
              border: 1px solid color('manatee');
              font-size: $medium;
              background-color: color('white');
              padding: 2px 10px;
              @include text-with-ellipsis();
              width: 60px;

              &.bg-green {
                background-color: color("surf-crest") !important;
              }

              &.bg-red {
                background-color: color("pink") !important;
              }
            }
          }
        }
      }

      .dialog-box-help {
        right: 78px;
      }
    }
  }

  .help-integration{
    width: 37px;
    height: 30px;
    margin-top: -2px;
  }

}

.rollup-criteria {
  .content {
    min-height: 500px;
    padding: 10px 15px;
  }

  .mars-select .multiselect-container {
    -webkit-box-shadow: none;
    box-shadow: none;

    li.disabled { /* please check "input.scss", "disabled" class  "display: block !important;"  */
      display: none !important;
    }
  }

  .topHead {
    position: relative;

    .btn-close {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 10px;
      top: 0;
    }
  }

  .top-action-area {
    flex-wrap: wrap;
    gap: 5px 10px;

    &::after {
      display: none;
    }

    .head-label {
      height: $icon-large;
      padding: 5px 40px 5px 10px;
      background-color: color("pattens-blue");
      color: color("black2");
      @include border-radius(0);
      cursor: pointer;
      position: relative;
    }

    .btn-add-category {
      position: absolute !important;
      top: 0 !important;
      right: 0 !important;
    }

    .btn-save,
    .btn-edit {
      width: $icon-large;
      height: $icon-large;
    }

    .text-bar {
      padding: 5px 10px;
      background-color: color("white-smoke");
    }
  }

  .financial-setting-criteria {
    max-width: 100% !important;
    width: 710px !important;
    left: 0 !important;
    right: 0;
    margin: 0 auto !important;

    .report-content--edit {
      .is-edit {
        display: block;
      }

      .is-save {
        display: none;
      }
    }

    .report-content--save {
      .is-edit {
        display: none;
      }

      .is-save {
        display: block;
      }
    }

    .data {
      padding: 3px 10px;
    }

    .colum-wrap,
    .radio-wrap,
    .column {
      @include flexbox();
    }

    .column .mars-select {
      width: 132px;

      .multiselect-container {
        min-width: unset;
        width: 100%;
      }
    }

    .mars-radio {
      float: unset;
      min-width: 132px;
    }

    .report-title {
      height: $icon-large;

      .btn-save,
      .btn-edit {
        width: $icon-large;
        height: $icon-large;
        position: absolute;
        top: 0;
        right: 45px;
      }
    }

    .report-content {
      background: $c-white;
      margin: 0; // style.css
      padding: 10px;
    }

    .reportrowcontent {
      .radio-highlight {
        width: 400px;

        label {
          float: left;
        }

        .form-control {
          width: 60px;
        }
      }

      .input-wrap {
        display: inline-flex;
        align-items: center;
        gap: 0 5px;
        font-style: normal;

        em {
          font-style: normal;
          margin: 0 5px;
        }
      }

      .data {
        &.data-highlight {
          padding: 0 10px;
        }

        .input-wrap {
          .data-input {
            height: 26px;
            display: block;
            border: 1px solid color('manatee');
            font-size: $medium;
            background-color: color('white');
            padding: 2px 10px;
            @include text-with-ellipsis();
            width: 60px;

            &.bg-green {
              background-color: color("surf-crest") !important;
            }

            &.bg-red {
              background-color: color("pink") !important;
            }
          }
        }
      }
    }

    .dialog-box-help {
      right: 78px;
    }
  }

  /* tab-container */
  .tab-container {
    margin-top: 5px;
    position: relative;
    z-index: 0;

    &.tab-container--edit .vertical-nav-tabs {
      .is-edit {
        display: block;
      }

      .is-save {
        display: none;
      }
    }

    &.tab-container--save .vertical-nav-tabs {
      .is-edit {
        display: none;
      }

      .is-save {
        display: block;
      }
    }
  }

  .tab-container--child {
    margin: 0;

    .tab-section {
      display: -ms-grid;
      display: grid;
    }

    .group-item-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 5px;
      padding: 0;
      margin: 0 0 10px 0 !important;

      .group-item {
        position: relative;
        height: 26px;
        width: 100%;
        @media (min-width: 768px) {
          width: 190px;
        }

        a {
          height: 26px;
          display: block;
          background: color("light-grayish-blue") !important;
          color: color("black2");
          padding: 2px 10px;
          white-space: nowrap !important;
          text-overflow: ellipsis;
          overflow: hidden;
          cursor: pointer;
          text-decoration: none;
        }

        &:hover a,
        &.active a {
          background: color("fringy-flower") !important;
        }
      }
    }
  }

  .tab-content {
    display: block;
    margin-top: 0;
  }

  .vertical-tabs-container {
    display: -ms-grid !important;
    display: grid !important;
    @media (min-width: 768px) {
      grid-template-columns: 232px 1fr;
      grid-column-gap: 10px;
    }

    .vertical-nav-tabs {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      border: none;
      color: color("black2") !important;

      li {
        float: none;
        margin: 0 0 10px 0;
        padding: 0;
        background: color("white-smoke-2") !important;
        position: relative;
        cursor: pointer;

        .btn-add-group {
          position: absolute;
          top: 0;
          right: 0;
          width: $icon-large;
          height: 26px;

          i {
            width: 24px;
            height: 100%;
          }
        }

        a {
          height: 26px;
          line-height: inherit;
          padding: 3px 10px;
          color: color('black2') !important;
          margin: 0;
          text-decoration: none;
          display: block;
          cursor: pointer;
          @include border-radius(0);
          @include transition(.4s);
          border: none !important;

          &:hover {
            background: color('tropical-blue') !important;
          }
        }

        &.active a {
          background: color('tropical-blue') !important;
        }

        &:first-child .input-box .btn-deletecell {
          display: none;
        }

        .input-box {
          display: flex;

          .btn-hand,
          .btn-deletecell {
            width: $icon-large;
            position: unset;
            right: unset;
            top: unset;
          }

          .btn-deletecell {
            border: 1px solid color('manatee');
            border-left: none;
          }

          .form-control {
            flex-grow: 1;
            width: 0;
          }
        }
      }
    }

    .tab-pane {
      padding-bottom: 10px;
      position: relative;
      max-width: 930px;
      max-height: 100% !important;
      display: none;
      overflow: hidden;

      &.active {
        display: -ms-grid !important;
        display: grid !important;
        grid-row-gap: 10px;
      }

      .title {
        height: 30px;
        padding: 0 15px;
        @include linear-gradient(#dde0ec, #9da8ce);
        position: relative;

        h2 {
          font-family: $base-font-semibold;
          font-size: $medium;
          color: color('sapphire');
          line-height: 30px;
          margin: 0;
          padding-right: 60px;
          @include text-with-ellipsis();
        }

        .btn-save,
        .btn-edit,
        .btn-trash,
        .btn-close {
          width: $icon-large;
          height: $icon-large;
          position: absolute;
          top: 0;
          right: 40px;
          cursor: pointer;
        }

        .btn-close {
          right: 10px;
          display: block;
        }
      }

      .section {
        max-width: 930px !important;
        width: 100%;
        overflow: auto;

        &.section--new {
          display: none;

          &.active {
            display: block;
          }
        }

        &.section--save .title {
          .btn-trash {
            right: 40px;
            display: block;
          }

          .btn-save,
          .btn-edit {
            right: 70px !important;
          }
        }
      }

      .btn-popupclose {
        margin-right: 5px;
      }

      .section-content {
        background: color('white-smoke');
        padding: 20px 10px;
        overflow: visible;

        &:after {
          content: '';
          display: table;
          clear: both;
        }
      }
    }
  }

  .create-group {
    height: 382px;
    @media (min-width: 812px) {
      height: calc(100vh - 292px);
    }
    @media (min-width: 813px) {
      height: calc(100vh - 294px);
    }
    @media (min-width: 1201px) {
      height: calc(100vh - 262px);
    }

    .create-group__column--center .create-group__list--individual {
      max-height: 470px;
    }
  }
}

.rollup-criteria,
.hotel-selection-popup {
  /* To update common component for our regular style */
  input[type="text"] {
    padding: 0 10px;
    height: 26px;
    font-size: $medium;
    background: color('cumulus');
    color: color('black2');
    border: 1px solid color('manatee');
    @include placeholder();
    @include border-radius(0);

    &:disabled {
      background: color('white-smoke') !important;
    }

    &:-moz-read-only,
    &:read-only {
      background: color('white') !important;
    }

    &:focus {
      outline: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }

  input[readonly] {
    background: color('white') !important;
  }

  /* create-group */
  .create-group {
    overflow: auto;

    &.create-group--edit {
      .is-edit {
        display: block;
      }

      .is-save {
        display: none;
      }

      .is-edit .additem {
        display: none;
      }

      .btn-block:before {
        display: block;
      }
    }

    &.create-group--save {
      .is-edit {
        display: none;
      }

      .is-save {
        display: block;
      }

      .is-edit .additem {
        display: none !important;
      }

      .btn-block:before {
        display: none;
      }

      .btn-clear {
        display: none !important;
      }

      .btn-addproperty {
        display: none !important;
      }
    }

    .btn-addproperty {
      width: 26px;
      height: 26px;
      background-color: color("white") !important;

      i {
        width: 26px;
        height: 26px;
      }
    }

    .top-row {
      display: -ms-grid;
      display: grid;
      grid-template-columns: 680px 220px;
      grid-column-gap: 10px;

      .total-hotel {
        display: -ms-grid;
        display: grid;
        grid-template-columns: auto auto;
        grid-column-gap: 10px;
      }
    }

    .grouping-input-area {
      overflow: hidden;
      position: relative;
      margin-bottom: 4px;

      span {
        height: 26px;
        color: $c-black2;
        background: color("tropical-blue");
        display: block;
        padding: 3px 10px;
        width: 220px;
        float: left;
      }

      .form-control {
        position: relative;
        background: $c-lturquoise;
        margin-left: 230px;
        float: none;
        width: 310px;
        max-width: 100%;
      }
    }

    .additem {
      border: 1px solid color("manatee");
      border-top: none;
      padding: 0 10px;
      background: color("white");
      height: 26px;
      margin-top: 5px;

      &:first-child {
        margin-top: 0;
      }
    }

    .searchitem {
      border: 1px solid $c-border;

      .form-control {
        border: none;
        height: 24px;
      }
    }

    .search-box {
      position: absolute;
      right: 0;
      top: 0;
      width: $icon-large;
      height: 24px;
      padding: 0 !important;
      z-index: 100;
      @include transition(.3s);

      &.open {
        width: 280px;

        .search-wrap .form-control {
          width: 100%;
          display: block;
        }
      }

      .search-wrap {
        position: relative;
        padding: 0 30px 0 0;

        .form-control {
          height: 24px;
          width: 0;
        }

        .btn-search {
          width: $icon-large;
          height: 24px;
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer;
          background: color("tropical-blue") !important;

          &.active {
            background: color("moderate-blue") !important;
          }

          i {
            width: 100%;
            height: 100%;
            background-position: center center;
          }
        }
      }
    }

    .create-group__row {
      display: -ms-grid;
      display: grid;
      grid-template-columns: 220px 450px 220px;
      grid-column-gap: 10px;
    }

    .create-group__section {
      margin-top: 10px;

      &:first-child {
        margin-top: 0;
      }
    }

    .create-group__section__title {
      padding: 2px 10px;
    }

    .create-group__title {
      border: 1px solid color("dark-moderate-blue");

      > div {
        padding: 2px 10px;
      }
    }

    .create-group__section__title,
    .create-group__title {
      height: 26px;
      line-height: auto;
      font-family: $base-font;
      font-size: $medium;
      font-weight: normal;
      color: $c-black2;
      background: color("tropical-blue") !important;

      .additem {
        background: transparent;
      }

      &.grouppropertytitle {
        margin: 0;
        position: relative;

        .additem {
          margin: 0;
        }
      }
    }

    .create-group__column--left {
      .searchitem {
        margin-top: -1px !important;
        display: none;

        &.show {
          display: block;
        }
      }

      .card-country .card-body ul {
        max-height: 189px;
        overflow: auto;
      }
    }

    .create-group__column--center {
      display: -ms-grid;
      display: grid;
      grid-template-rows: auto 1fr;
      grid-row-gap: 10px;

      .btn-clear {
        display: none;
        height: 24px;
        padding: 0 !important;
        background-color: color("white-lilac") !important;

        i {
          height: 100%;
          width: $icon-large;
        }
      }

      .btn-deletecell {
        width: $icon-large;
        height: 26px;
      }

      .additem-filter {
        background: color("whisper") !important;
      }

      .create-group__section {
        overflow: hidden;
        display: -ms-grid;
        display: grid;
        grid-template-rows: 26px 1fr;
        grid-row-gap: 4px;
        margin: 0;

        .additem {
          border: none;
          padding: 0 10px;
          overflow: hidden;
          position: relative;
          display: flex;

          span {
            display: flex;
            align-items: center;
            position: relative;
            line-height: auto;
          }

          .item-number {
            width: $icon-large;
          }

          .item-name {
            width: 170px;
          }

          .item-id {
            width: 80px;
          }

          .id-value {
            padding-left: 15px;
          }

          .item-country {
            width: 120px;
          }
        }

        .create-group__title {
          .additem {
            padding: 0;
          }

          .additem span {
            justify-content: center;
          }

          .sort-span {
            width: 0 !important;
            margin-left: 10px;
          }
        }

        &:first-child .create-group__title {
          display: -ms-grid;
          display: grid;
          grid-template-columns: 1fr 30px;
        }
      }

      .create-group__list {
        min-height: 28px;
        overflow: auto;
        border: 1px solid $c-blue2;

        .btn-deletecell {
          right: 0;
          top: 0;
        }
      }

      .create-group__list--property,
      .create-group__list--individual {
        overflow: auto;
        max-height: 120px;
      }

      .create-group__list--individual {
        max-height: 320px;
      }
    }

    .create-group__row--setcriteria {
      display: -ms-grid;
      display: grid;
      grid-template-columns: 680px 220px !important;
      grid-column-gap: 10px;
      margin-bottom: 4px;

      .create-group__section {
        @include flexbox();
        column-gap: 10px;
        align-items: center;

        .create-group__section__title {
          background: color("pattens-blue");
          width: 220px;
        }

        .total-hotel {
          width: 80px;
        }
      }
    }

  }

  /* css for above property popup*/

  .above-hotel-selection-popup{
    .create-group {
      .create-group__row--setcriteria {
        grid-template-columns: 790px 110px !important;

        .create-group__hotel__title_aboveproperty{
          width: 120px !important;
        }
      }
    }
  }

  /* accordion */
  .accordion {
    margin: 0;

    .card {
      margin-top: 4px;
    }

    .collapse {
      max-height: 350px;
      overflow: auto;
    }

    .collapseHeading {
      border-radius: 0;
      display: block;
      text-align: left;
      text-decoration: none;
      font-family: "SourceSansProRegular";
      font-size: 14px;
      font-weight: normal;
      color: color("black2");
      background: color("white");
      padding: 5px 10px;
      position: relative;
      flex-grow: 1;
      margin: 0;
      border: 1px solid color("manatee");
    }

    .collapseHeading:before {
      content: '';
      position: absolute;
      top: 1px;
      right: 10px;
      width: 0;
      height: 0;
      margin-top: 7px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid color("moderate-blue");
      border-top: 0;
    }

    .collapsed .collapseHeading:before {
      border-top: 8px solid color("moderate-blue");
      border-bottom: 0;
    }

    .select-all-hotel {
      height: 28px;
      margin-top: 4px;
      background-color: color("white");
    }

    .select-all-hotel,
    .card-body ul li {
      border: 1px solid color("manatee");
      display: flex;
      cursor: pointer;

      &.active {
        background-color: color("cosmic-latte");
        display: flex !important;
      }

      &.dbactive {
        background-color: color("cosmic-latte");
        background-image: url(../images/chi-tic.svg);
        background-repeat: no-repeat;
        background-position: calc(100% - 10px) center;
        background-size: 16px auto;
        pointer-events: none;
      }

      div {
        flex-grow: 1;
        padding: 3px 10px;
      }
    }

    .card-body {
      ul {
        padding: 0;
        margin: 0;

        li {
          border-top: none;
          background-color: color("white-smoke-2");
        }
      }
    }

    .card-single-property .card-body ul li {
      display: list-item;
    }
  }
}

/* popup */
.hotel-selection-popup {
  font-family: $base-font;
  padding: 10px 0 10px 0 !important;
  background: $c-white3;

  .create-group {
    height: 540px;
  }

  .shorten-text-span {
    display: inline-block !important;
    float: left;
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
  }

  .dialog-box-help {
    position: absolute;
    right: 68px;
    margin-top: unset;
  }
}

.hotel-selection-popup,
.delete-group-popup,
.delete-inputbox-popup,
.delete-popup,
.delete-property-popup,
.clear-popup {
  display: none;
}

.dialog-titlebar-change {
  padding-top: 0 !important;

  .ui-dialog-titlebar {
    height: 30px;
    padding: 4px 10px;
    width: 100%;
    margin-bottom: 20px;

    .help-integration {
      width: 38px;
      height: 31px;
      margin-top: -4px;
      background-size: 32px 32px !important;
    }
  }

  .ui-icon-closethick {
    left: 0px;
    top: 0px;
    margin: 0;
  }

  .btn-edit,
  .btn-save {
    right: 45px;
    top: 0 !important;
  }
}

.mars-popup.hotel-selection-popup {
  top: 13.5px !important;
  left: 208px !important;
}

.rollup-criteria {
  .landing-content {
    padding: 0;
    .top-action-area {
      padding: 10px 15px;
      margin-bottom: 0;
      background: color("white");
    }
  }
}