/*-------------- permis-set -----------------*/
.add-perm-set{
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 2px 4px 0 #dbe4f9;

  &__content-wrap{
    height: calc(100vh - 238px);
    overflow-y: auto;
  }

	&__content{
		padding: 20px 25px 18px;
	}

  .select,
  .select-filter{
    width: 350px;
  }

	&__head{
		@include font(normal, 600, rem(16px), 1.57, $color-dark-grey);
		text-transform: uppercase;
		margin-bottom: 5px;
		margin-top: -3px;
	}

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

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

		&__list{margin-top: 17px;}

		&__more{padding-left: 0;}
	}

	.rule-build-item{
		&__head{
			width: 32px;
			margin-right: 8px;
			padding-left: 5px;
			text-align: left;
		}

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

.add-perm-date{
  &.error{outline: none;}
  &.error input[type="text"]{border-color: $color-red;}
}

.add-perm-set-main{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 18px;
	border-bottom: 1px solid $color-light-grey;
	margin-bottom: 19px;

  &__head{
    @include font(normal, 600, rem(16px), 1.57, $color-dark-grey);
    text-transform: uppercase;
  }

	&__item{
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.input-radio{
			margin-right: 18px;
			&__label{margin-bottom: 0;}
      &__text{white-space: nowrap;}
		}
	}

	// &__item:not(:last-child){margin-bottom: 6px;}

	&__switch{
		display: flex;
		align-items: center;
	}

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

.add-perm-sect{
	margin-left: 20px;
	margin-right: 20px;

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

	&__content{
		border-radius: 4px;
		border: 1px solid $color-light-grey;
		padding: 10px 37px 10px 15px;
	}

	&__item{
		display: flex;
	}

	&__item:not(:last-child){margin-bottom: 5px;}

	&__title{
		width: 150px;
		padding-right: 5px;
		@include font(normal, 600, rem(14px), rem(27px), $color-dark-grey);
		margin-top: 5px;
		margin-bottom: 5px;
	}

  &__title-text{
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

	&__opt{
    vertical-align: middle;
    @include font(italic, normal, rem(14px), rem(27px), $color-grey);
    text-transform: none;
	}

	&__select{
		display: flex;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	&__select &__label{
		margin-top: 0;
		margin-bottom: 0;
	}

	&__select:not(:last-child){margin-right: 15px;}

	&__label{
		@include font(normal, 600, rem(14px), rem(27px), $color-dark-grey);
		margin: 5px 10px 5px 0;
	}

  &__input{
    input[type="text"],
    input[type="email"]{
      height: rem(29px);
      width: 100%;
      outline: none;
      border: 1px solid $color-light-grey;
      border-radius: 2px;
      @include font(normal, normal, rem(14px), rem(27px), $color-dark-grey);
      padding: 0 15px;
      margin: 0;
      transition: all 0.3s ease;
    }

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

    input[type="text"]:focus,
    input[type="email"]:focus,
    textarea:focus{
      border-color: $color-purple;
    }

    input[disabled],
    textarea[disabled]{
      background: #fff;
      color: $color-light-grey;
    }
  }

	&__fields{
		display: flex;
		flex-wrap: wrap;
		width: calc(100% - 150px);

    .date-error{width: 100%;}
	}

	&__fields > input[type="text"],
	&__fields > input[type="email"]{
		margin-top: 5px;
		margin-bottom: 5px;
	}

	&__head{
		@include font(normal, 600, rem(14px), 1.57, $color-dark-grey);
		text-transform: uppercase;
		margin-bottom: 6px;
	}

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

  .input-number{
    width: 130px;
  }

  .input-number-wrap{
    margin-top: 5px;
    margin-bottom: 5px;

    input[type="text"]{
      width:100% !important;
      text-align: left;
    }
  }

  .input-number-wrap:not(:last-child){margin-right: 12px;}

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

	.input-date{
		height: 29px;
		width: 130px;
		margin-top: 5px;
		margin-bottom: 5px;

    input[type="text"]{
      padding: 0 30px 0 4px;
      height: 29px;
      line-height: rem(27px);
    }
	}

  .calendar .ui-inputtext{
    max-width: 130px;
    padding: 0 30px 0 4px;
    height: 29px;
    line-height: 1.6875rem;
  }

	.input-date:not(:last-child){margin-right: 12px;}

  .select-date{
    &__main{
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

	.input-check{
		margin-top: 5px;
		margin-bottom: 5px;
		display: inline-flex;
		vertical-align: middle;
		align-items: center;
		margin-top: 3px;

		&__label{
			vertical-align: top;
			margin-bottom: 0;
		}
	}

	.input-check:not(:last-child){margin-right: 12px;}

	&__input{
		width: 550px;
		margin: 5px 15px 5px 0;
	}

  &__input_full{
    width: 100%;
    margin-right: 0;
  }
}

.allowed-events{
	&__choose{
		margin-bottom: 5px;

		.input-radio{
			&__label{margin-bottom: 5px;}
      &__text{white-space: nowrap;}
		}
	}
}

.add-perm-templ{
	display: flex;
	justify-content: space-between;
	height: 212px;
	border-radius: 4px;
	border: solid 1px rgba(172, 178, 195, 0.5);
	margin-bottom: 20px;

	&__list,
	&__info{
		height: 100%;
		overflow-y: auto;
	}

	&__list{width: 40%;}
	&__info{width: 60%;}

	&__list{
		border-right: solid 1px rgba(172, 178, 195, 0.5);

		.input-check{
			&__label{
				width: 100%;
				margin: 0;
				padding: 6.5px 15px 6px;
			}

			&__label:hover{background: $color-sort-grey;}

			&__text{
				text-overflow: ellipsis;
				overflow: hidden;
			}

      &__label:hover .input-check__mark::before{display: none;}
		}

    input[disabled] + .input-check__label .input-check__mark{background: transparent;}
	}

	&.disable{opacity: 0.5;}
}

.add-perm-templ-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 100%;
	text-align: center;
	margin: 0 auto;

	&__icon{margin-bottom: 12px;}

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

	&__accent{font-weight: bold;}
}

.add-perm-evets{
	&__title{
		@include font(normal, 600, rem(14px), 1.57, $color-dark-grey);
		text-transform: uppercase;
		margin-bottom: 10px;
	}

	&__content{
		min-height: 86px;
		padding: 10px 14px;
		border-radius: 4px;
    border: solid 1px rgba(161, 173, 205, 0.5);
    background: rgba(242, 243, 245, 0.5);
	}

	&__list{
		display: flex;
		flex-wrap: wrap;
		margin: -4px;
	}

	&__item{
		height: rem(27px);
		border-radius: 13.5px;
		background-color: rgba(172, 178, 195, 0.25);
		padding: 0 10px;
		@include font(normal, normal, rem(13px), rem(25px), $color-dark-blue);
		white-space: nowrap;
		margin: 4px;
	}

	&__subtitle{
		@include font(normal, 600, rem(14px), 1.57, $color-dark-grey);
		margin-bottom: 4px;
	}

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

.add-perm-templ-res{
	&__item{
		display: flex;
		height: rem(30px);
	}

	&__item:nth-child(odd){background: $color-sort-grey;}
	&__item:hover{background: #e1e3e7;}

	&__title{
		width: 63%;
		padding: 0 20px 0 40px;
		@include font(normal, normal, rem(14px), rem(28px), $color-dark-grey);
		text-overflow: ellipsis;
		overflow: hidden;
	}

	&__type{
		width: 37%;
		@include font(normal, 600, rem(14px), rem(28px), $color-dark-grey);
		padding: 0 40px 0 20px;

		.icon{
			display: inline-block;
			vertical-align: middle;
			max-width: 24px;
			max-height: 24px;
			margin-right: 10px;
			fill: $color-dark-grey;
		}
	}
}