/*-------------- query-flow-----------------*/
.query-flow {
  margin-top: -24px;

  .notice-msg {
    padding: 22px 15px 17px;

    &__btn {
      margin-top: 25px;
    }

    &__top {
      padding-bottom: 12px;
    }
  }

  .admin-table-wrap {
    &__action {
      margin-bottom: 12px;
    }

    &__col .btn {
      min-width: 124px;
    }
  }

  .admin-table-popup {
    padding: 8px 0;

    &__item {
      min-width: 205px;
      padding: 5px 19px;
    }
  }

  .flow-steps {
    position: relative;
    z-index: 2;
  }
}

.query-flow-notes-wrap {
  background: $color-sort-grey;

  &_border {
    border-bottom: 1px solid $color-light-grey-blue;
  }
}

.typography-flow-notes {
  margin-bottom: 50px;
  background: #fff;
  padding: 20px 0;

  .query-flow-notes-wrap {
    padding: 5px 45px;
    max-width: 1200px;

    .query-flow-notes {
      margin-bottom: 0;
    }
  }
}

.query-flow-notes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  @include font(normal, normal, rem(14px), 1.57, $color-dark-grey);
  padding: 5px 50px 5px 0;
  position: relative;

  &_border {
    border-bottom: 1px solid $color-light-grey-blue;
  }

  &_jc {
    justify-content: space-between;
  }

  &__main {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
  }

  &__icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    margin-left: -3px;

    .ic-hover {
      width: 24px;
      height: 24px;
    }
  }

  .ic-back-to-page {
    width: 24px;
    height: 24px;
  }

  &__title {
    font-weight: 600;
  }

  &__field {
    width: 385px;
    position: relative;
    margin: 5px 10px 5px 0;

    input[type="text"] {
      height: rem(30px);
      width: 100%;
      border: 1px solid $color-light-grey;
      border-radius: 2px;
      outline: 0;
      margin: 0;
      padding: 0 12px;
      background: #fff;
      @include font(normal, normal, rem(14px), rem(28px), $color-dark-blue);
    }

    input[type="text"]::placeholder {
      color: $color-grey;
      opacity: 1;
    }

    input[type="text"]:hover {
      border: 1px dashed $color-light-grey;
    }

    input[type="text"]:focus {
      border: 1px solid $color-purple;
    }

    input[type="text"]:focus + .query-flow-notes__field-close {
      display: inline-block;
      vertical-align: middle;
    }

    input[disabled],
    input[disabled]:hover {
      background: transparent;
      border-color: transparent;
      color: $color-dark-grey;
    }

    input[disabled]:focus + .query-flow-notes__field-close {
      display: none;
    }

    .tooltip {
      display: none;
      position: absolute;
      white-space: nowrap;
      margin: 0 0 0 8px;
      @include top-center;
      left: 100%;
      z-index: 2;
    }

    &.error input[type="text"] {
      border-color: $color-red;
    }

    &.error .tooltip {
      display: inline-block;
    }
  }

  &__field-close {
    display: none;
    width: 30px;
    height: calc(100% - 2px);
    background: #fff;
    position: absolute;
    top: 1px;
    right: 1px;

    .icon {
      vertical-align: top;
      width: 8px;
      height: 8px;
      position: absolute;
      @include top-center;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }

  &__field_big {
    width: 430px;
  }

  &__field_small {
    width: 310px;
  }

  &__save {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 8px;

    .tooltip {
      display: none;
      white-space: nowrap;
      position: absolute;
      @include top-center;
      right: 100%;
      margin-top: 0;
      margin-bottom: 0;
    }

    // .tooltip::after{
    // 	left: 0;
    // 	right: 0;
    // 	margin: 0 auto;
    // }

    .icon {
      cursor: pointer;
    }

    .ic-saved {
      fill: $color-light-grey;
    }
  }

  &__save:hover .tooltip {
    display: inline-block;
  }

  &__save.ic-hover::before {
    margin-left: -1px;
  }

  &__empty {
    @include font(normal, normal, rem(14px), 1.57, $color-grey);
  }

  &_no-padding {
    padding-right: 17px;
  }
}

.query-flow-menu {
  position: absolute;
  top: 10px;
  right: -13px;

  &__btn .icon {
    margin: 0;
  }

  &__popup {
    display: none;
    min-width: 178px;
    border-radius: 4px;
    background: #fff;
    box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
    border: solid 1px rgba(172, 178, 195, 0.5);
    padding: 7px 0;
    margin: -10px -16px 0 0;
    text-align: left;
    position: absolute;
    right: 100%;
    top: 100%;
    z-index: 10;
  }

  &__popup.active,
  &:hover &__popup {
    display: block;
  }

  &__item {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    @include font(normal, normal, rem(14px), 1.57, $color-dark-blue);
    cursor: pointer;
  }

  &__item.disable .icon {
    fill: $color-light-grey;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;

    .ic-calculate-cohort {
      width: 22px;
      height: 22px;
    }
  }

  &__text {
    // width: calc(100% - 40px);
    white-space: nowrap;
  }

  &__item:hover {
    background: $color-sort-grey;
    color: $color-dark-blue;
    text-decoration: none;
  }

  &__top,
  &__bottom {
    padding: 8px 0;
  }

  &__bottom {
    border-top: 1px solid rgba(172, 178, 195, 0.5);
  }

  &__sect {
    padding: 8px 0;
  }

  &__sect:first-child {
    padding-top: 0;
  }

  &__sect:last-child {
    padding-bottom: 0;
  }

  &__sect:not(:last-child) {
    border-bottom: solid 1px rgba(172, 178, 195, 0.5);
  }

  &__item.disable {
    color: $color-light-grey;
  }

  &__item.disable:hover {
    background: transparent;
    cursor: auto;
  }

  &.disable &__btn .icon {
    fill: $color-light-grey;
  }

  &.disable:hover &__popup,
  &.disable:hover &__btn::before {
    display: none;
  }
}

.query-flow-top-wrap {
  &_design {
    background: $color-sort-grey;
    border-bottom: 1px solid rgba(161, 173, 205, 0.5);
  }
}

.query-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  @include font(normal, normal, rem(14px), 1.57, $color-dark-grey);
  padding: 5px 50px 5px 0;
  position: relative;

  &__main,
  &__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 5px 0;
  }

  &__icon {
    width: 24px;
    height: 24px;
    margin-right: 7px;
    margin-left: -3px;

    .ic-hover {
      width: 24px;
      height: 24px;
    }
  }

  .ic-back-to-page {
    width: 24px;
    height: 24px;
  }

  &__title,
  &__desc {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 5px 10px 5px 0;
  }

  &__title {
    max-width: 385px;
  }

  &__desc {
    max-width: 462px;
    color: $color-grey;
    position: relative;
    margin-right: 20px;
  }

  &__desc::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 15px;
    background: #979797;
    margin-right: 8px;
    margin-top: -3px;
  }

  &__label {
    font-weight: 600;
  }

  &__save {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 8px;

    .tooltip {
      display: none;
      white-space: nowrap;
      position: absolute;
      @include top-center;
      right: 100%;
      margin-top: 0;
      margin-bottom: 0;
    }

    .icon {
      cursor: pointer;
    }

    .ic-saved {
      fill: $color-light-grey;
    }
  }

  &__save:hover .tooltip {
    display: inline-block;
  }

  &__save.ic-hover::before {
    margin-left: -1px;
  }

  &__empty {
    @include font(normal, normal, rem(14px), 1.57, $color-grey);
  }
}

.flow-steps {
  display: flex;
  flex-wrap: wrap;
  background: $color-dark-blue;
  position: relative;
  padding-bottom: 1px;

  &::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 100%;
    background: $color-light-grey;
    position: absolute;
    top: 31px;
    left: 0;
  }

  &__top {
    height: 32px;
    padding: 10px 0 6px;
    border-bottom: 1px solid $color-light-grey;
    position: relative;
  }

  &__sect:not(:last-child) &__top::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: $color-light-grey;
    position: absolute;
    @include top-center;
    right: 0;
  }

  &__title {
    @include font(normal, 600, rem(12px), 1.2, $color-sort-grey);
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 35px;
  }

  &__sect:first-child &__title {
    padding: 0 20px;
  }

  &__title_center {
    text-align: center;
  }

  &__title.disable {
    opacity: 0.5;
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  &__item {
    display: inline-flex;
    align-items: center;
    height: 30px;
    position: relative;
    padding: 0 24px 0 35px;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  &__sect:first-child &__item:first-child {
    padding-left: 20px;
  }

  &__arr {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  &__arr::before,
  &__arr::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 9px;
    position: absolute;
    @include top-center;
    transition: all 0.3s ease;
  }

  &__arr::after {
    border-color: transparent transparent transparent $color-dark-blue;
    right: -9px;
    z-index: 2;
  }

  &__arr::before {
    border-color: transparent transparent transparent $color-light-grey;
    right: -10px;
    z-index: 1;
  }

  &__sect:last-child &__item:last-child &__arr::before {
    border-color: transparent transparent transparent $color-dark-blue;
  }

  &__sect:last-child &__item:last-child &__arr::before {
    display: none;
  }

  &__num {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #fff;
    @include font(normal, normal, rem(14px), rem(18px), #fff);
    text-align: center;
    margin-right: 8px;
    transition: all 0.3s ease 0s;
  }

  &__val {
    max-width: calc(100% - 30px);
    @include font(normal, normal, rem(14px), 1.2, #fff);
    transition: all 0.3s ease 0s;
    white-space: nowrap;
  }

  &__item:hover {
    background: #3f4a69;
  }

  &__item:hover &__arr::after {
    border-color: transparent transparent transparent #3f4a69;
  }

  &__sect:last-child &__item:last-child:hover &__arr::before {
    border-color: transparent transparent transparent $color-light-grey;
  }

  &__item.disable {
    opacity: 0.5;
    cursor: auto;
  }

  &__item.disable:hover {
    background: transparent;
  }

  &__item.disable:hover &__arr::after {
    border-color: transparent transparent transparent $color-dark-blue;
  }

  &__sect:last-child &__item.disable:last-child:hover &__arr::before {
    border-color: transparent transparent transparent $color-dark-blue;
  }

  &__item.active {
    background: #fff;
  }

  &__item.active &__num {
    border-color: $color-dark-blue;
    color: $color-dark-blue;
  }

  &__item.active &__val {
    color: $color-dark-blue;
    font-weight: 600;
  }

  &__item.active &__arr::after {
    border-color: transparent transparent transparent #fff;
  }

  &__item.active &__arr::before {
    display: none;
  }

  &__item.active::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 0 16px 9px;
    position: absolute;
    @include top-center;
    transition: all 0.3s ease;
    border-color: transparent transparent transparent $color-dark-blue;
    left: 1px;
    z-index: 1;
  }

  &__item.active::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 100%;
    background: $color-dark-blue;;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  &__sect:first-child &__item.active:first-child::before,
  &__sect:first-child &__item.active:first-child::after {
    display: none;
  }

  &__item.active:hover {
    background: $color-grey;
  }

  &__item.active:hover &__arr::after {
    border-color: transparent transparent transparent $color-grey;
  }

  &__item.active:hover &__num {
    border-color: #fff;
    color: #fff;
  }

  &__item.active:hover &__val {
    color: #fff;
    font-weight: 600;
  }

  .tooltip {
    display: none;
    width: 250px;
    margin: 8px 0 0 0;
    position: absolute;
    top: 100%;
    left: 35px;
  }

  &__sect:first-child &__item:first-child .tooltip {
    left: 20px;
  }

  &__item:hover .tooltip,
  .tooltip.active {
    display: block;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    margin-right: 7px;

    .icon {
      fill: #fff;
    }

    .ic-lock-close {
      width: 16px;
      height: 20px;
    }
  }
}

.flow-content {
  background: #fff;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 4px 0 #dbe4f9;

  .rule-build {
    border-radius: 0 0 0 2px;
    padding-bottom: 15px;

    &__more {
      margin-bottom: 0;
      vertical-align: middle;
    }
  }

  .rule-build-item {
    margin-bottom: 18px;
  }

  .slider-rule {
    border-radius: 0 0 0 2px;
    padding-bottom: 15px;
  }

  &__main {
    padding: 20px 15px;
    border-left: 5px solid $color-purple;
    border-radius: 0 0 0 2px;
    background: #fff;
    box-shadow: 0 2px 4px 0 #dbe4f9;

    .flow-content-include {
      margin-top: -10px;
      margin-bottom: -10px;
    }
  }

  &__main_grey {
    border-color: $color-light-grey;
  }

  &__text {
    @include font(normal, normal, rem(14px), 1.57, $color-dark-grey);

    b {
      font-weight: bold;
    }
  }

  .event-map-panel {
    &__list {
      height: calc(100vh - 290px);
      padding-top: 1px;
      margin-top: -1px;
    }

    &__list_indent {
      height: calc(100vh - 347px);
    }

    &__item:nth-child(odd) {
      background: transparent;
    }

    &__item:first-child {
      background: rgba(242, 243, 245, 0.7);
    }

    &__item {
      min-height: 43px;
      border-top: 1px solid $color-light-grey;
      margin-top: -1px;
    }

    &__item.active,
    &__item:hover {
      background-color: #f7f9fb;
      position: relative;
    }

    &__item.active {
      border-color: $color-dark-purple;
      z-index: 2;
    }

    &__var .event-map-panel__item {
      min-height: 35px;
    }

    &__group > .event-map-panel__item {
      border-top: 1px solid $color-dark-purple;
    }
  }

  .event-map-main {
    &__content-wrap {
      height: calc(100vh - 317px);
      padding: 0;
    }

    &__title > .tooltip {
      left: 0;
      margin-top: 5px;
    }

    &__content {
      .rule-build {
        .drop-auto__head {
          width: 200px;
        }

        .event-select__head {
          width: 140px;
        }

        .rule-build-item .drop-auto_big .drop-auto__head {
          width: 250px;
        }
      }
    }

    &__top {
      background: $color-sort-grey;
    }
  }

  .slider-rule {
    position: relative;
    z-index: 0;
  }


  &.close .flow-content-top__arr .icon {
    transform: rotate(270deg);
  }

  &.close .rule-build,
  &.close .slider-rule,
  &.close .flow-content-top::before {
    display: none;
  }

  & + & {
    margin-top: 20px;
  }
}

.flow-content-include {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 15px;

  .btn {
    padding-left: 25px;
    padding-right: 25px;
  }
}

.flow-content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 35px 4px 18px;
  background: $color-sort-grey;
  // border-bottom: 1px solid rgba(161,173,205,0.5);
  border-left: 5px solid $color-purple;
  position: relative;

  &::before {
    content: '';
    display: inline-block;
    width: calc(100% - 1px);
    height: 1px;
    background: rgba(161, 173, 205, 0.5);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

  &_grey {
    border-left-color: $color-light-grey;
  }

  &_dark-blue {
    border-left-color: $color-dark-blue;
  }

  // &_grey::after{background: $color-light-grey;}
  // &_dark-blue::after{background: $color-dark-blue;}

  &_no-filled {
    background: transparent;
    // border-bottom: 1px solid #fff;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  &_no-filled::before {
    background: #fff;
  }

  &_no-filled &__edit {
    font-size: rem(14px);
    color: $color-dark-blue;
  }

  &_no-filled + .rule-build {
    padding-top: 0;
  }

  &__icon {
    flex: 0 0 24px;
    margin-right: 2px;

    .icon {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
  }

  .ic-pointer-active {
    vertical-align: top;
    fill: $color-purple;
    width: 19px;
    height: 23px;
  }

  &__info {
    display: flex;
    align-items: center;
    // width: calc(100% - 30px);
    max-width: 100%;
    padding-right: 10px;
  }

  &__info_indent {
    padding-right: 40px;
  }

  &__edit-wrap,
  &__count {
    display: flex;
    align-items: center;
  }

  &__edit-wrap {
    max-width: calc(100% - 30px);
  }

  &__count-text {
    display: inline-block;
    height: rem(30px);
    min-width: 0;
    border: 1px dashed transparent;
    border-radius: 2px;
    vertical-align: middle;
    @include font(normal, normal, rem(16px), rem(28px), $color-dark-grey);
    position: relative;
    transition: all 0.3s ease;
    white-space: nowrap;
  }

  &__count-text_small {
    font-size: rem(14px);
    white-space: nowrap;
  }

  &__count-icon {
    position: relative;

    .tooltip {
      display: none;
      width: 250px;
      position: absolute;
      @include top-center;
      left: 100%;
      margin: 0 0 0 8px;
      z-index: 2;
    }

    .tooltip::after {
      @include top-center;
    }
  }

  &__count-icon:hover .tooltip {
    display: inline-block;
  }

  .ic-help,
  .ic-info {
    flex: 0 0 16px;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }

  .ic-inclusion,
  .ic-demographic {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 24px;
  }

  .ic-demographic {
    margin-top: -7px;
  }

  .ic-pointer-active {
    margin-right: 4px;
  }

  //&__edit-close{
  //  display: none;
  //  width: 30px;
  //  height: calc(100% - 2px);
  //  background: #fff;
  //  position: absolute;
  //  top: 1px;
  //  right: 1px;
  //
  //  .icon{
  //    vertical-align: top;
  //    width: 8px;
  //    height: 8px;
  //    position: absolute;
  //    @include top-center;
  //    left: 0;
  //    right: 0;
  //    margin: 0 auto;
  //  }
  //}

  &__edit {
    display: inline-block;
    vertical-align: middle;
    min-width: 0;
    position: relative;
  }

  &__edit-text {
    height: rem(30px);
    white-space: nowrap !important;
    overflow: hidden;
    border: 1px dashed transparent;
    border-radius: 2px;
    @include font(normal, normal, rem(16px), rem(28px), $color-dark-grey);
    padding: 0 4px;
    transition: all 0.3s ease;
    position: relative;
    // text-overflow: ellipsis;
    // max-width: 100%;

    span,
    div {
      display: inline-block !important;
      font-family: inherit !important;
      white-space: nowrap !important;
      font-weight: normal !important;
      font-style: normal !important;
      line-height: rem(28px) !important;
      font-size: rem(16px) !important;
      color: $color-dark-grey !important;
      background: transparent !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    b {
      font-weight: normal !important;
    }
  }

  &__edit-text::after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 4px;
    height: 100%;
  }

  &__edit div:not(:first-child) {
    display: none;
  }

  &__edit-text:hover {
    border-color: $color-light-grey;
    background: #fff;
  }

  &__edit-text:focus {
    border: 1px solid $color-purple;
    background: #fff;
    position: relative;
  }

  //&__edit-text:focus + &__edit-close{display: inline-block; vertical-align: middle;}

  &__edit.disabled:hover,
  &__edit.disabled:focus {
    min-width: 0;
    border-color: transparent;
    background: transparent;
  }

  &__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: $color-grey;
    @include font(normal, normal, rem(14px), 1, #fff);
    text-align: center;
    margin-left: 8px;
  }

  &__num + &__count-text {
    margin-left: 5px;
  }

  &__redefine {
    position: relative;
    flex-shrink: 0;
    margin-left: -30px;

    .tooltip {
      display: none;
      white-space: nowrap;
      position: absolute;
      @include top-center;
      right: 100%;
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &__redefine:hover .tooltip {
    display: inline-block;
  }

  &__arr {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin-left: -10px;

    .icon {
      transition: all 0.2s ease 0s;
    }
  }

  &__or {
    @include font(normal, normal, rem(14px), 1.2, $color-dark-blue);
    margin: 0 10px;
  }
}

.flow-content-menu {
  position: absolute;
  top: 5px;
  right: 6px;

  &__btn .icon {
    margin: 0;
  }

  &__popup {
    display: none;
    width: auto;
    // max-width: 226px;
    border-radius: 4px;
    background: #fff;
    box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
    border: solid 1px rgba(172, 178, 195, 0.5);
    padding: 7px 0;
    margin: -10px -16px 0 0;
    text-align: left;
    position: absolute;
    right: 100%;
    top: 100%;
    z-index: 10;
  }

  &__popup.active,
  &:hover &__popup {
    display: block;
  }

  &__item {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    @include font(normal, normal, rem(14px), 1.57, $color-dark-blue);
  }

  &__item.disable .icon {
    fill: $color-light-grey;
  }

  &__icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  &__text {
    // width: calc(100% - 40px);
    white-space: nowrap;
  }

  &__item:hover {
    background: $color-sort-grey;
    color: $color-dark-blue;
    text-decoration: none;
  }

  &__top,
  &__bottom {
    padding: 8px 0;
  }

  &__bottom {
    border-top: 1px solid rgba(172, 178, 195, 0.5);
  }

  &__item.disable {
    color: $color-light-grey;
  }

  &__item.disable:hover {
    background: transparent;
    cursor: auto;
  }
}

.flow-search {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  @include font(normal, normal, rem(14px), 1.57, $color-dark-grey);
  padding: 0 20px;
  position: relative;

  &__label {
    margin-right: 10px;
  }

  .form-search {
    width: 450px;
    max-width: calc(100% - 15px);
    margin-right: 15px;
  }

  &__vs {
    text-transform: uppercase;
    margin-right: 15px;
  }

  .btn {
    padding: 0 20px;
  }

  .btn_border {
    font-weight: normal;
  }

  &__close {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    position: absolute;
    @include top-center;
    right: 0;

    .icon {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      height: 100%;
    }
  }
}

.flow-empty {
  padding: 60px 60px 46px 55px;
  text-align: center;

  &_indent {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  &_grey {
    border-left: 5px solid $color-light-grey;
  }

  &__title {
    @include font(normal, normal, rem(18px), 0.89, $color-dark-grey);
    margin-bottom: 22px;

    b {
      font-weight: 600;
    }

    .ic-help,
    .ic-info {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
      margin-left: 5px;
    }
  }

  &__subtitle {
    @include font(normal, normal, rem(16px), 0.89, $color-dark-grey);
    margin-top: -5px;
    margin-bottom: 25px;
  }

  &__text {
    @include font(normal, normal, rem(14px), 1.43, $color-grey);
    margin-top: -10px;
    margin-bottom: 24px;
  }

  &__img {
    margin-top: 48px;
  }

  &_indent {
    padding-bottom: 60px;
  }
}

.flow-tag {
  display: table;
  vertical-align: middle;
  vertical-align: top;
  // height: 16px;
  border-radius: 8px;
  background: $color-dark-blue;
  padding: 0 8px;
  @include font(normal, 600, rem(11px), rem(16px), #fff);
  text-transform: uppercase;
  text-align: center;
  margin: 2px 0;
  transform: translateX(-50%);

  &_grey {
    background: $color-light-grey;
    color: $color-dark-blue;
  }

  &_pink {
    background: #ffbfe4;
    color: $color-dark-blue;
  }

  &_yellow {
    background: $color-yellow;
    color: $color-dark-blue;
  }
}

.query-flow-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  min-height: 40px;
  background: $color-sort-grey;
  box-shadow: 0 2px 4px 0 #dbe4f9;
  padding: 8px 20px;
  margin-bottom: 20px;

  &__title {
    @include font(normal, normal, rem(16px), 1.38, $color-dark-grey);
    margin-right: 15px;
  }

  &__content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: -12px;
  }

  &__desc {
    @include font(normal, normal, rem(14px), 1.57, $color-dark-grey);
    margin-right: 5px;
  }

  &__info {
    margin-left: 4px;
    position: relative;

    .ic-info,
    .ic-help {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
    }

    .tooltip {
      position: absolute;
      bottom: 100%;
      left: -12px;
    }
  }
}

.query-flow-panel-switch {
  display: flex;
  align-items: center;

  &__label {
    @include font(normal, normal, rem(14px), 1.57, $color-dark-grey);
    margin-right: 12px;
  }

  .switch__content {
    background: #fff;
  }
}

.calc-column {
  position: relative;
  cursor: pointer;

  &__head {
    height: rem(30px);
    width: 100%;
    min-width: 211px;
    border: 1px solid $color-dark-purple;
    border-radius: rem(15px);
    @include font(normal, 600, rem(14px), rem(28px), $color-dark-purple);
    text-align: center;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;

    .icon {
      fill: $color-dark-purple;
      vertical-align: middle;
    }

    .ic-plus {
      width: 9px;
      height: 9px;
    }

    .ic-select-arr-calc {
      width: 10px;
      height: 7px;
    }

    .icon:first-child {
      margin-right: 6px;
    }

    .icon:last-child {
      margin-left: 8px;
    }
  }

  // &__head-arr{
  // 	display: inline-block;
  // 	width: 50px;
  // 	height: 30px;
  // 	text-align: center;
  // 	position: absolute;
  // 	@include top-center;
  // 	right: 0;
  // }

  // &__head-arr .icon{
  // 	vertical-align: top;
  // }

  &__popup {
    display: none;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
  }

  &__option {
    // width: 220px;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: solid 1px $color-light-grey;
    border-radius: 4px;
    padding: 15px 0;
    box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
  }

  &__popup.active {
    display: block;
  }

  &__param {
    display: flex;
    align-items: center;
    @include font(normal, normal, rem(14px), rem(30px), $color-dark-blue);
    padding: 0 20px;
    cursor: pointer;
  }

  &__param:not(:last-child) {
    margin-bottom: 8px;
  }

  &__param.active,
  &__param:hover {
    background: $color-sort-grey;
  }

  &__icon {
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  &__text {
    width: calc(100% - 40px);
    white-space: nowrap;
  }

  // &.disable &__head{color: $color-light-grey;}
  // &.disable:hover{cursor: auto;}
  // &.disable:hover &__option{display: none;}

}

.ex-modal-filter {
  margin-bottom: 30px;

  .modal-window {
    position: relative;
    margin: 0;
    transform: none;
  }
}

.add-filter-wrap {
  .modal-window {
    width: 1000px;
    max-width: 90%;
    height: 80%;

    &__head {
      font-size: rem(16px);
      font-weight: 600;
      margin-bottom: 12px;
    }
  }
}

.add-filter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 35px);
  padding-top: 15px;
  border-top: 1px solid rgba(161, 173, 205, 0.5);

  &__content {
    height: calc(100% - 42px);
    overflow-y: auto;
  }

  &__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 25px 20px;
    margin: 0 -25px -20px;
    position: relative;
    z-index: 2;
  }

  &__btn-group {
    display: flex;
    align-items: center;

    .btn + .btn {
      margin-left: 15px;
    }
  }

  &__btn_shadow {
    box-shadow: 0 -5px 21px 0 rgba(128, 152, 213, 0.15);
  }

  &__btn-link {
    @include font(normal, 600, rem(14px), 1.25, $color-dark-purple);
    cursor: pointer;
  }

  &__btn-link:hover {
    color: $color-dark-purple;
    text-decoration: underline;
  }

  .rule-build {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;

    &__more {
      padding: 0;
      margin-bottom: 0;
      margin-top: -8px;
    }

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

    &__select {
      margin-right: 12px;
    }
  }

  .rule-build-item {
    margin-bottom: 12px;

    &__content {
      width: 100%;
      //max-width: 739px;
      padding: 2px 15px;
    }
  }

  .rule-build-fields {
    input[type="email"],
    input[type="text"] {
      width: 85px;
    }
  }

  .rule-build-fields__item_text input[type=text] {
    width: 180px;
  }

  .drop-cond {
    &_big .drop-cond__head {
      width: 240px;
    }
  }
}

.query-flow-dem {
  margin-top: -20px;
  margin-bottom: -20px;

  &__content {
    background: #fff;
    border-top: 1px solid $color-light-grey;
  }

  &__info {
    height: 92px;
    padding: 21px 20px 4px;
  }

  &__text {
    @include font(normal, normal, rem(14px), 1.2, $color-dark-grey);
    margin-bottom: 19px;
  }

  &__table {
    height: calc(100vh - 347px);
    padding-top: 25px;
    position: relative;
  }

  .admin-table-wrap {
    height: 100%;
    overflow-y: auto;
    border-top: 1px solid rgba(161, 173, 205, .5);
  }

  .admin-table {
    box-shadow: none;
    border-bottom: 1px solid rgba(161, 173, 205, .5);

    &__head .admin-table__item {
      height: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-bottom: 0;
      position: static;
    }

    &__title {
      display: block;
      position: absolute;
      top: -2px;
    }

    &__item {
      padding-top: 0;
      padding-bottom: 0;
    }

    &__select {
      width: 420px;
    }

    &__type .admin-table__title {
      width: 60px;
    }

    .select {
      width: 100%;
    }

    &__icon {
      display: inline-block;

      .tooltip {
        width: 250px;
        white-space: normal;
        top: 0;
        transform: none;
      }
    }

    &__item_center .tooltip {
      text-align: left;
    }
  }
}

.query-flow-dem-res {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  &__text {
    @include font(normal, normal, rem(13px), 1.2, $color-dark-grey);
  }

  &__more {
    @include font(normal, normal, rem(13px), 1.2, $color-blue);
    margin-left: 8px;
    margin-bottom: -3px;
    padding-left: 8px;
    position: relative;

    .icon {
      vertical-align: middle;
      fill: $color-blue;
      margin-left: -10px;
    }
  }

  &__more:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 14px;
    background: $color-light-grey;
    position: absolute;
    @include top-center;
    left: 0;
  }
}

.query-flow-table {
  margin-bottom: -20px;

  .admin-table-wrap {
    &__content {
      width: 100%;
      height: calc(100vh - 318px);
      overflow: auto;
    }
  }

  .admin-table {
    tr th.admin-table__item {
      background: #fff;
      vertical-align: middle;
      position: sticky;
      top: 0;
      z-index: 9;
    }
  }
}

.flow-steps-wrap + .query-flow-panel-wrap + .query-flow-table .admin-table-wrap__content {
  height: calc(100vh - 371px);
}

.query-flow-top-wrap + .query-flow-panel-wrap + .query-flow-table .admin-table-wrap__content {
  height: calc(100vh - 247px);
}

.query-flow-top-wrap + .query-flow-panel-synth + .query-flow-table .admin-table-wrap__content,
.query-flow-top-wrap + .query-flow-panel-wrap_big + .query-flow-table .admin-table-wrap__content {
  height: calc(100vh - 301px);
}

.query-flow-cond {
  display: inline-flex;
  align-items: center;
  margin: 0 15px 0 7px;

  &__label {
    @include font(normal, normal, rem(14px), 1.2, $color-dark-grey);
    margin-right: 5px;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 16px;
    position: relative;
    margin-left: 6px;

    .ic-help {
      width: 16px;
      height: 16px;
      vertical-align: top;
    }

    .tooltip {
      display: none;
      width: 250px;
      position: absolute;
      top: 100%;
      right: -9px;
      margin: 8px 0 0;
      z-index: 2;

      &::after {
        left: auto;
        right: 10px;
      }
    }
  }

  &__icon:hover .tooltip {
    display: inline-block;
  }

  .tabs-page_small .tabs-page__item {
    min-width: 61px;
  }

  &__tag {
    display: inline-block;
    height: 16px;
    background: $color-grey;
    border-radius: 8px;
    padding: 0 9px;
    @include font(normal, 600, rem(11px), rem(16px), $color-dark-blue);
    text-transform: uppercase;
  }

  &__tag_pink {
    background: #ffbfe4;
  }

  &__tag_yellow {
    background: $color-yellow;
  }
}

.combined-event {
  margin-top: -24px;

  .flow-empty {
    padding-top: 62px;
    margin-bottom: -20px;

    &_height {
      min-height: calc(100vh - 192px);
    }

    &__img {
      margin-top: 66px;
    }
  }
}

@media (max-width: 1899px) {
  .query-flow-dem {
    .admin-table {
      &__type .admin-table__title {
        width: 90px;
      }
    }
  }
}

@media (max-width: 1650px) {
  .query-flow-dem {
    .admin-table {
      &__select {
        width: 260px;
      }

      &__head-name {
        width: 400px;
      }
    }
  }
}

@media (max-width: 1366px) {
  .query-flow-dem {
    .admin-table {
      &__type .admin-table__title {
        width: 60px;
      }
    }
  }
}

@media (max-width: 1199px) {
  .query-flow-panel {
    &__content {
      margin-top: 8px;
    }
  }
}

@media (max-width: 991px) {
  .query-flow-dem {
    .admin-table {
      &__head-name {
        width: auto;
      }
    }
  }
}

@media (max-height: 800px) {
  .flow-empty {
    padding: 38px 60px 38px 55px;

    &_indent {
      padding-top: 60px;
      padding-bottom: 60px;
    }
  }
}

@media (max-width: 767px) {
  .flow-content {
    .event-map-main__content-wrap {
      height: auto;
      overflow: visible;
    }

    .event-map-panel {
      &__info {
        height: auto;
      }

      &__list {
        height: auto;
        overflow: visible;
      }
    }

    .event-map.open-panel .event-map-panel__content {
      height: auto;
    }
  }

  .query-flow-dem {
    &__info,
    &__table {
      height: auto;
    }

    &__info {
      padding-bottom: 20px;
    }

    .admin-table {
      display: table;

      tbody {
        display: table-row-group;
      }

      thead {
        display: table-header-group;
      }

      &__head,
      &__row,
      tr {
        display: table-row;
      }

      &__item,
      td {
        display: table-cell;
      }

      &__head .admin-table__item:last-child,
      &__item:last-child {
        display: table-cell;
        position: static;
        transform: none;
      }

      &__head-name {
        width: auto;
      }
    }
  }
}