/*-------------- info-popup -----------------*/
.info-popup{
	display: inline-block;
	width: 460px;
	background: #fff;
	padding: 15px;
	margin: 4px;
	border-radius: 4px;
	box-shadow: 0 -9px 21px 0 rgba(128, 152, 213, 0.15), -10px 9px 21px 0 rgba(128, 152, 213, 0.15);
	position: relative;
	@include font(normal, normal, rem(12px), 1.35, $color-dark-grey);

	&::after{
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff;
		border-style: solid;
		border-width: 0 7px 6px;
		position: absolute;
		bottom: 100%;
		left: 20px;
	}

	&_right::after{
		left: auto;
		right: 20px;
	}

  &_center::after{
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  &_bottom::after{
    bottom: auto;
    top: 100%;
    border-color: #fff rgba(0,0,0,0) rgba(0,0,0,0);
    border-width: 6px 7px 0;
  }

	&__top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 11px;
		border-bottom: 1px solid $color-light-grey;
	}

	&__head{
		@include font(normal, 600, rem(12px), 1.2, $color-dark-blue);
		text-transform: uppercase;

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

	&__option{
		@include font(italic, normal, rem(12px), 1.2, $color-grey);
		margin-left: 6px;
	}

  &__close{
    width: 16px;
    height: 17px;
    cursor: pointer;
    margin-left: 10px;
    position: relative;

    .tooltip{
      display: none;
      white-space: nowrap;
    }
  }

  &__close .tooltip.active,
  &__close:hover .tooltip{
    display: inline-block;
    margin: 0 8px 0 0;
    position: absolute;
    @include top-center;
    right: 100%;
    z-index: 2;
  }

	&__content{
		padding-top: 12px;
	}

	&__btn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

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

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

	textarea{
		height: rem(67px);
		font-size: rem(12px);
		line-height: 1.2;
		padding: 8px;
	}

  &__text-wrap,
  &__param{
    display: flex;
  }

	&__title{
		font-weight: 600;
		margin-right: 14px;
	}

  &__text,
  &__text p{
    @include font(normal, normal, rem(12px), 1.35, $color-dark-grey);
  }

  &__param{
    &:not(:last-child){margin-bottom: 10px;}
    b{font-weight: 600;}

    .ic-external-link{
      display: inline-block;
      vertical-align: middle;
      width: 17px;
      height: 17px;
      fill: $color-blue;
    }

    a,
    .link-site{
      text-decoration: none;
    }

    a:hover,
    .link-site:hover{
      text-decoration: underline;
    }

    .info-popup-icon{
      margin-top: 8px;
      margin-bottom: 0;
    }
  }

  &__param &__title{
    min-width: 68px;
    font-weight: normal;
    white-space: nowrap;
    margin-right: 8px;
  }

  &__param-wrap{
    display: flex;
  }

  &__param-wrap &__param{
    display: block;
  }

  &__param-wrap &__param:first-child{
    width: 105px;
    margin-right: 8px;
  }

  &__param-wrap &__param:nth-child(2){
    width: calc(100% - 113px);
  }

  &__param-wrap &__title{
    margin-right: 0;
    margin-bottom: 4px;
  }

  &__param_fix &__title{
    width: 105px;
    margin-right: 8px;
  }

  &__param_fix &__text{
    width: calc(100% - 113px);
  }

  &__or{
    margin: 0 5px;
  }

  &__date{margin-bottom: 2px;}
}

.info-popup-switch{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-top: 5px;
	padding-bottom: 5px;

	.switch{
		margin-left: 10px;
    margin-bottom: -5px;
	}

	&__content{
		display: flex;
		max-width: calc(100% - 67px);
	}

	&__icon{
		width: 20px;
		margin-right: 6px;
	}

	.icon{
		fill: $color-grey;
		margin-left: 0;
	}

	.ic-shared{
		width: 19px;
		height: 17px;
	}

	&__icon + &__text-wrap{
		max-width: calc(100% - 26px);
	}

	&__text-wrap,
	&__text{
		@include font(normal, normal, rem(12px), 1.35, $color-dark-grey);
	}

	&__title{
		font-weight: 600;
	}
}

.info-popup-icon{
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  font-size: 12px;

  p{font-size: 12px;}

  &__img{width: 17px;}
  &__text{width: calc(100% - 22px);}

  .icon{
    display: inline-block;
    vertical-align: top;
    width: 17px;
    height: 17px;
  }

  &_blue{
    color: $color-blue;
    .icon{fill: $color-blue;}
  }

  &:last-child{margin-bottom: 0;}

  &__text{
    p{margin-bottom: 8px;}
    p:last-child{margin-bottom: 0;}
  }

  .ic-business-warning{margin-top: 0;}
}