/*-------------- page-header -----------------*/
.page-header{
	margin-bottom: 24px;
	font-size: rem(14px);
  position: relative;
  z-index: 15;

	&__wrap{
		display: flex;
		justify-content: space-between;
	}

	&__icon{
		width: 30px;
	}

	&__content{
		display: flex;
		align-items: center;
		width: calc(100% - 60px);
	}

	h1,
	.h1{
		margin-bottom: 0;
		margin-top: -7px;
	}

  &__text{
    display: inline-block;
    height: rem(30px);
    background: transparent;
    border: 1px dashed transparent;
    outline: 0;
    padding: 0 4px;
    margin-right: 12px;
    @include font(normal, normal, rem(14px), rem(28px), $color-dark-grey);
    margin-left: 17px;
    position: relative;

    .info-popup{
      display: none;
      position: absolute;
      top: 100%;
      left: calc(100% - 45px);
      z-index: 10;
    }

    .info-popup.active{display: inline-block;}
  }

  &__text:hover{border-color: $color-light-grey;}
  &__text:focus{border: 1px solid $color-light-grey;}

  &__text_no-edit:hover,
  &__text_no-edit:focus{
    border: 1px solid transparent;
  }

	&__back,
	&__back .icon{
		width: 24px;
		height: 24px;
	}

	&__back{
		margin-top: -3px;
		margin-right: 4px;
		position: relative;
	}

	&__back .tooltip{
		display: none;
		white-space: nowrap;
		position: absolute;
		left: -7px;
		top: calc(100% + 2px);
		z-index: 3;
	}

	&__back:hover .tooltip,
	&__back.active .tooltip{
		display: inline-block;
	}

	.system-notice{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin-top: -10px;
	}
}

@media (max-width: 767px) {
	.page-header{
		margin-bottom: 8px;

		&__content{
			flex-wrap: wrap;
		}

		&__text{
			width: 100%;
			margin-left: 0;

			input[type="text"]{
				min-width: 290px;
			}
		}

		h1,
		.h1{
			margin-top: 0;
		}
	}
}