/*-------------- form-site -----------------*/
.form-site{




	&__item{
		margin-bottom: 20px;
		position: relative;

	}

  &__remark p{
    font-style: normal;
    font-weight: 400;
    font-size: .75rem;
    line-height: 1.4;
    color: #52576a;
    margin-bottom: 1.25rem;
    margin-top: -5px;
  }

  &__remark p:not(:last-child) {
    margin-bottom: 0.625rem;
  }

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

	&__label{
		display: block;
		@include font(normal, 600, 14px, 1, $color-dark-grey);
		margin-bottom: 6px;
	}

	&__icon{
		// margin-left: 4px;

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

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

	input[type="text"].input-small,
	input[type="email"].input-small{
		height: rem(30px);
	}

	textarea{
		display: block;
		height: 122px;
		padding-top: 8px;
		padding-bottom: 8px;
		line-height: 1.79;
	}

	input[type="text"]::placeholder,
	input[type="email"]::placeholder,
	textarea::placeholder{
		color: $color-light-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;
	}

	.select{
		width: 100%;

    &__head{color: $color-light-grey;}
    &__head.active{color: $color-dark-grey;}
	}

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

	&__shared{
		display: flex;
		justify-content: space-between;
		// align-items: center;
		// flex-wrap: wrap;
		@include font(normal, normal, 14px, 1.25, $color-dark-grey);
		margin-top: 6px;
	}

	&__shared-notice{
		display: inline-flex;
		padding-right: 10px;
		width: calc(100% - 65px);
	}

	&__shared-notice .ic-shared{
		display: inline-block;
		vertical-align: middle;
		width: 19px;
		height: 17px;
		margin-right: 8px;
		fill: $color-grey;
	}

	&__shared .switch{
		margin-top: -2px;
	}

	// &__shared-notice .ic-shared{
	// 	margin-top: -4px;
	// }

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

  &__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;
  }

  &_btn-group{display: flex;}

	&__info,
	&__help{
		display: inline-block;
		vertical-align: middle;
		width: 16px;
		height: 16px;
		margin-left: 5px;
		position: relative;
		cursor: pointer;
		margin-top: -2px;
	}

	&__info.ic-hover,
	&__help.ic-hover{
		width: 16px;
		height: 16px;
	}

	&__info .tooltip,
	&__help .tooltip{
		display: none;
		position: absolute;
		bottom: 100%;
		left: -12px;
	}

	&__info:hover .tooltip,
	&__help:hover .tooltip{
		display: block;
	}

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

	&__item_error input[type="text"],
	&__item_error input[type="email"],
	&__item_error textarea,
	&__item_error .file-upload,
	&__item_error .select__head{
		border-color: $color-red;
	}

	&__item_error .form-site-alert{color: $color-red;}
  &__item_error .form-site-alert_long{margin-bottom: 25px;}

	.select-date{
		input[type="text"]{
			width: 160px;
			height: rem(30px);
			line-height: rem(28px);
      color: $color-dark-blue;
		}
	}

	&__notice{
		margin-top: 85px;
		@include font(normal, normal, rem(12px), 1.2, $color-dark-grey);

		.icon{
			width: 20px;
			height: 20px;
			margin-right: 6px;
		}
	}

	&__notice .icon,
	&__notice-text{
		vertical-align: middle;
	}

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

  &__event-res{
    @include font(normal, normal, rem(14px), 1.2, $color-dark-grey);
    margin-top: 10px;
  }

  &__event-res.disable{color: $color-grey;}

  &__content {
    height: 349px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.form-site-tabs__label {
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  color: rgb(82, 87, 106);
  margin-bottom: 10px;
}

.form-site-tabs {
  margin-top: 26px;
  margin-bottom: 24px;
}

.form-site-tabs::after, .form-site-tabs::before {
  box-sizing: inherit;
  font-size: inherit;
  font-family: inherit;
}

.form-site-tabs__content {
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
}

.link-site {
  color: rgb(5, 150, 255);
  cursor: pointer;
  text-decoration: none;
}

.link-site::after, .link-site::before {
  box-sizing: inherit;
  font-size: inherit;
  font-family: inherit;
}

.form-site-alert{
	display: flex;
	//align-items: center;
	justify-content: space-between;
	@include font(normal, normal, 12px, 1.25, $color-dark-blue);
  margin-top: 2px;
  margin-bottom: -19px;

	&__icon{
		width: 17px;
		height: 17px;
		margin-right: 5px;
	}

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

.input-date{
  display: inline-block;
  vertical-align: middle;
  position: relative;

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

  &__small input[type="text"]{height: rem(30px);}

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

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

  .icon{
    width: 25px;
    height: 25px;
    position: absolute;
    @include top-center;
    right: 3px;
  }
}

.file-upload{
	height: 40px;
	border-radius: 2px;
	border: 1px solid $color-light-grey;

	input[type="file"]{display: none;}

	&__content{
		padding: 0 10px 0 17px;
		display: inline-flex;
    vertical-align: top;
		align-items: center;
		width: 100%;
		height: 100%;
		margin: 0;
	}

	&__btn{
		display: inline-block;
		height: 23px;
		width: 112px;
		border-radius: 11.5px;
		border: solid 1px $color-light-grey;
		padding: 0 15px;
		@include font(normal, 600, 12px, 21px, $color-dark-grey);
		text-align: center;
		margin-right: 5px;
		cursor: pointer;
	}

	&__btn:hover{
		border-color: $color-dark-purple;
	}

	&__name{
		@include font(normal, normal, 14px, 21px, $color-dark-grey);
	}

	&__name.disable{
		color: $color-light-grey;
		white-space: nowrap;
		width: calc(100% - 117px);
		overflow: hidden;
		text-overflow: ellipsis;
	}

  &.disable &__btn{
    color: $color-light-grey;
    cursor: auto;
  }

  &.disable &__btn:hover{border-color: $color-light-grey;}
}

.file-upload-wrap{
  padding-right: 16px;

  &__content{
    display: flex;
    align-items: center;

    .btn,
    button.btn,
    input[type="submit"].btn{
      min-width: 147px;
      padding: 0 20px;
    }

    .btn{
      flex-shrink: 0;
      margin-left: 16px;
    }

    .loader-btn{
      flex-shrink: 0;
      width: 147px;
      margin-left: 16px;
    }

    loader-btn__def{
      padding: 0 20px;
    }
  }

  &__note{
    @include font(normal, normal, rem(14px), 1.2, $color-grey);
    margin-top: 10px;
  }

  .file-upload{width: 100%;}

  &__msg{
    display: flex;
    @include font(normal, normal, rem(14px), 1.2, $color-green);
    margin-top: 10px;

    .icon{
      flex-shrink: 0;
      margin-right: 6px;
    }

    .ic-success{
      width: 16px;
      height: 16px;
    }

    .ic-failure{
      width: 18px;
      height: 16px;
    }
  }

  &.error .file-upload__content{border-color: $color-red;}
  &.error &__msg{color: $color-red;}
}

.img-upload{
  position: relative;

  input[type="file"]{display: none;}

  &__content{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  &__img{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 2px;
    border: solid 1px $color-light-grey;
    padding: 2px;
    cursor: pointer;

    .icon{
      width: 24px;
      height: 24px;
      max-width: 100%;
      max-height: 100%;
    }
  }

  &__img:hover{border-color: $color-dark-purple;}

  &__name{
    @include font(normal, normal, 14px, 21px, $color-dark-grey);
    white-space: nowrap;
    width: calc(100% - 46px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

  &__list{
    display: flex;
    flex-wrap: wrap;
    max-height: 167px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid $color-light-grey;
    border-radius: 2px;
    padding: 4px 9px;
    position: absolute;
    top: 100%;
    margin-top: 6px;
    z-index: 2;
  }

  &__item{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 2px;
    border: solid 1px $color-light-grey;
    padding: 7px;
    margin: 6px;
    cursor: pointer;
    position: relative;

    .icon{
      max-width: 100%;
      max-height: 100%;
    }
  }

  &__item.active{border: 1.2px solid $color-dark-purple;}

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

    &_right{
      left: auto;
      right: 100%;
    }
  }

  &__item:hover{background: $color-sort-grey;}
  &__item:hover .tooltip{display: inline-block;}

  &.selected &__img .icon{
    width: 32px;
    height: 32px;
  }
}

.select-date{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;

	&__item:not(:last-child){
		margin-right: 16px;
	}

	&__main{
		display: flex;
		align-items: center;
		margin-bottom: 30px;
    position: relative;
	}

	&__title{
		@include font(normal, normal, rem(14px), 1, $color-dark-blue);
		margin-right: 8px;
	}

	&__icon{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	right: 3px;
	z-index: 2;
	}

  &__item.disable &__icon{opacity: 0.3}

	.ic-calendar{
		vertical-align: middle;
	}

	&__field{
		position: relative;
	}

	&__label{
		@include font(normal, normal, rem(12px), 2, $color-grey);
		margin-top: 6px;
		position: absolute;
		left: 0;
		top: 100%;
	}

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

/*-------------- file-upload -----------------*/
// .file-upload{
// 	display: inline-block;
// 	vertical-align: middle;

//

// 	&__content{
// 		display: inline-block;
// 		vertical-align: middle;
// 		height: 43px;
// 		border-radius: 2px;
// 		background: $color-blue;
// 		padding: 0 10px 0 45px;
// 		text-align: center;
// 		cursor: pointer;
// 		text-decoration: none;
// 		border: 0;
// 		outline: 0;
// 		cursor: pointer;
// 		@include font(normal, bold, 14px, 43px, #222);
// 		margin: 0;
// 		position: relative;
// 		white-space: nowrap;
// 	}

// 	&__content::before{
// 		content: '';
// 		display: block;
// 		width: 26px;
// 		height: 24px;
// 		position: absolute;
// 		@include top-center;
// 		left: 8px;
// 		background: url(#{$path-img}/sprite.png) no-repeat -5px -620px;
// 	}

// 	&__content:hover{
// 		background-color: #000;
// 		color: #fff;
// 	}

// 	&__content:hover::before{
// 		background-position: -40px -620px;
// 	}

// 	&__name{
// 		text-overflow: ellipsis;
// 		text-align: left;
// 		width: 115px;
// 		display: inline-block;
// 		overflow: hidden;
// 	}
// }

.select{
	width: 230px;
	position: relative;

	&__head{
		height: rem(40px);
		width: 100%;
		border: 1px solid $color-light-grey;
		@include font(normal, normal, rem(14px), rem(38px), $color-grey);
		padding: 0 50px 0 15px;
		position: relative;
		white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
	}

	&__head.active{
		color: $color-dark-blue;
	}

  &:focus &__head,
  &__head:hover{
    border-color: $color-purple;
  }

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

    .icon{margin: 0;}
  }

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

  &__option{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    padding-bottom: 20px;
  }

  &__list{
    background: #fff;
    border: solid 1px $color-light-grey;
    border-top: 0;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
  }

	//&:hover &__option,
	//&__option.active{
  //
	//}

	&__param{
		@include font(normal, normal, rem(14px), rem(30px), $color-dark-grey);
		padding: 0 15px;
	}

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

  &__param-icon{
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon{
      max-width: 21px;
      height: 21px;
    }
  }

  &__param-text{
    max-width: calc(100% - 35px);
  }

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

	&_up &__option{
		top: auto;
		bottom: 100%;
		margin-top: 0;
		box-shadow: -10px -9px 21px 0 rgba(128, 152, 213, 0.08);
    padding-bottom: 0;
    padding-top: 20px;
	}

  &_up &__list{
    border-bottom: 0;
    border-top: 1px solid $color-light-grey;
  }

  &_small &__head,
  &_small &__search input[type="text"]{
		height: rem(28px);
		line-height: rem(26px);
	}

  &_small &__head{padding-right: 42px;}

	&_small{width: 195px;}
	&_small &__param{line-height: rem(25px);}
	&_small &__option{max-height: 270px;}

	&_full{width: auto;}

  &_long{width: 320px;}

	&__accent{color: $color-green;}

	input[type="text"]{
		width: 100%;
		height: 100%;
		border: 0;
		background: transparent;
	}

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

  &__icon-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon:first-child{
      flex: 0 0 30px;
      max-width: 30px;
      margin-right: 6px;
    }

    .icon:last-child{
      width: 20px;
      height: 20px;
      margin-left: 6px;
      fill: $color-dark-grey;
    }

    .ic-calendar:last-child{
      width: 22px;
      height: 22px;
    }
  }

	&__icon-wrap &__head-text {
		display: inline-block;
    max-width: calc(100% - 36px);
	}

	//&__icon-wrap &__param-text {
	//	max-width: 100%;
	//}
  //
	//&__icon-wrap .icon + &__head-text, &__icon-wrap .icon + &__param-text {
	//	max-width: calc(100% - 36px);
	//}

	&__search{
		position: relative;

    .auto-complete-dropdown{background-color: transparent}
	}

	&__search-close{
		display: none;
		width: 7px;
		height: 7px;
		position: absolute;
    right: 50px;
		@include top-center;
		text-align: center;
		vertical-align: middle;
	}

  &__search-close.auto-complete-dropdown{
    margin-right: -20px;
    width: 20px;
  }

	&__search-close .ic-close-small{
		width: 100%;
		height: 100%;
		fill: $color-dark-blue;
		vertical-align: top;
	}

  &__search input[type="text"]{
    height: rem(40px);
    @include font(normal, normal, rem(14px), rem(38px), $color-dark-blue);
    padding: 0 50px 0 15px;
    margin: 0;
    border: 1px solid $color-light-grey;
    outline: 0;
    background: transparent;
  }

	&__search input[type="text"]:focus + button + &__search-close,
	&__search input[type="text"]:focus + &__search-close,
  &__search:hover &__search-close{
		display: inline-block;
	}

	&__search input[type="text"]::placeholder{font-weight: 300; color: $color-grey; opacity: 1;}
	&__search input[type="text"]::-webkit-input-placeholder {font-weight: 300; color: $color-grey; opacity: 1;}
	&__search input[type="text"]:-moz-placeholder {font-weight: 300; color: $color-grey; opacity: 1;}

	&__search input[type="text"]:focus{
    border-color: $color-purple;
	}

  //&:hover .{
  //  display: block;
  //}

  &_no-border{
    display: inline-block;
    vertical-align: middle;
    width: auto;
  }

  &_no-border &__head{
    border: none;
    padding: 0 25px 0 0;
  }

  &_no-border &__head-arr{width: 30px;}
  &_no-border &__option{min-width: 150px;}

  &.disable{opacity: 0.5;}

  &_edit &__param{
    line-height: rem(30px);
    padding-right: 40px;
    position: relative;
  }

  &_edit &__param::after{
    content: '';
    display: none;
    width: 21px;
    height: 21px;
    background: url(/assets/img/ic-edit.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    @include top-center;
    right: 15px;
  }

  &_edit &__param:hover::after{display: inline-block;}

	// .form-search{
	// 	width: 100%;

	// 	input[type="text"]{
	// 		display: inline-block;
	// 		height: rem(30px);
	// 		width: 100%;
	// 		padding-right: 38px;
	// 		@include font(normal, normal, rem(14px), rem(28px), $color-dark-blue);
	// 		padding: 5px 0 0 26px;
	// 		margin: 0;
	// 		border: 0;
	// 		outline: 0;
	// 		border-bottom: 1px solid $color-grey;
	// 		background: transparent;
	// 	}

	// 	input[type="text"]::placeholder{font-weight: 300; color: $color-grey; opacity: 1;}
	// 	input[type="text"]::-webkit-input-placeholder {font-weight: 300; color: $color-grey; opacity: 1;}
	// 	input[type="text"]:-moz-placeholder {font-weight: 300; color: $color-grey; opacity: 1;}

	// 	input[type="text"]:focus{
	// 		border-color: $color-dark-purple;
	// 	}
	// }

  &.error &__head{border-color: $color-red;}
}

.select-filter{
	width: 260px;
	padding-top: 4px;
	text-align: left;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	overflow: hidden;

	&__content{
    display: flex;
    flex-direction: column;
    //min-height: 374px;
		padding: 20px 15px 20px;
		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);
	}

	&__top{
		display: flex;
		justify-content: space-between;
		align-items: center;
    margin-bottom: 1px;
	}

	.form-search{
		width: 100%;
    height: 33px;

    //&__close{margin-top: 3px!important;}

    &__close .icon{
      vertical-align: top;
      margin: 0;
    }
	}

	.form-search::after{
		content: '';
		width: 100%;
		height: 1px;
		background: $color-light-grey;
		position: absolute;
		bottom: 2px;
		left: 0;
	}

	//&__top .input-check__label{margin-bottom: 0;}

	&__clear{
		font-size: rem(14px);
		font-weight: normal;
    color: $color-blue;
    cursor: pointer;
	}

  &__clear:hover{text-decoration: underline;}

  &__btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -15px -20px;
    padding: 24px 15px 21px;
  }

  &__btn_shadow{
    box-shadow: -10px 9px 21px 13px rgba(128, 152, 213, 0.15)
  }

  &__params{
    max-height: 180px;
    overflow-y: auto;
    margin-left: -8px;
    padding-left: 8px;
    margin-top: 11px;
  }

  .input-check__label{
    width: 100%;
    margin-bottom: 12px;
  }

  .input-check__text{width: 100%;}

  &__top .input-check__label{margin-bottom: 0;}

  &__label{
    @include font(normal, normal, rem(14px), 1.43, $color-dark-grey);
    margin-top: 10px;
    border-bottom: 1px solid rgba(172, 178, 195,0.5);
    padding-bottom: 9px;
  }
}

.select-wrap.error{
	position: relative;

	.select__head{
		border-color: $color-red;
	}

	.tooltip{
		position: absolute;
		left: calc(100% + 4px);
		@include top-center;
		margin: 0 4px;
	}
}

.switch-wrap{
  display: inline-flex;
  align-items: center;

  &__label{
    @include font(normal, normal, rem(14px), 1.2,  #5d6177);
    margin-right: 12px;
  }
}

.switch{
	display: inline-block;
	vertical-align: middle;
	width: rem(57px);
	height: rem(24px);

	input[type="checkbox"]{
		display: none;
	}

	&__content{
		display: inline-block;
		width: 100%;
		height: 100%;
		border: solid 1px $color-light-grey;
		border-radius: rem(12px);
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
    margin: 0;
	}

	&__marker{
		display: inline-block;
		width: rem(16px);
		height: rem(16px);
		background: $color-light-grey;
		border-radius: 50%;
		position: absolute;
		@include top-center;
		left: 4px;
		transition: all 0.3s ease;
	}

	&__marker::before{
		content: '';
		display: none;
		width: rem(24px);
		height: rem(24px);
		border-radius: 50%;
		background: $color-light-grey;
		opacity: 0.2;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	&__on,
	&__off{
		@include font(normal, 600, rem(13px), rem(22px), $color-dark-grey);
		position: absolute;
		@include top-center;
	}

	&__on{left: 7px; display: none;}
	&__off{right: 7px;}

	&:hover &__content{background-color: rgba(172, 178, 195, 0.1);}

	input[type="checkbox"]:checked + &__content{border-color: $color-dark-purple;}
  input[type="checkbox"]:checked + &__content &__on{display: block; color: $color-dark-purple;}
	input[type="checkbox"]:checked + &__content &__off{display: none;}
	input[type="checkbox"]:checked + &__content &__marker{background: $color-dark-purple; left: auto; right: 4px;}
	input[type="checkbox"]:checked + &__content &__marker::before{background: $color-dark-purple;}

	input[type="checkbox"]:focus + &__content &__marker::before{display: inline-block;}
	input[disabled]:focus + &__content &__marker::before{display: none;}

	&:hover input[type="checkbox"]:checked + &__content{background-color: rgba(83, 3, 168, 0.05);}

	input[disabled] + &__content, &:hover input[disabled] + &__content{background: transparent; opacity: 0.5;}
	input[disabled]:checked + &__content, &:hover input[disabled]:checked + &__content{background: transparent; opacity: 0.5;}
}

.share-form-sort{
	margin-bottom: 20px;

	&__label{
		display: block;
		@include font(normal, 600, 14px, 1, $color-dark-grey);
		margin-bottom: 6px;
	}

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

	&__name.select{
		width: 247px;
		margin-right: 20px;
	}

	&__type.select{
		width: 117px;
		margin-right: 20px;
	}

	.btn_small,
	button.btn_small,
	input[type="submit"].btn_small{
		min-width: 85px;
	}
}

.share-form-empty{
	border: 1px solid $color-light-grey;
	border-radius: 2px;
	padding: 25px 25px 15px;
	text-align: center;

	&__text{
		@include font(normal, normal, rem(16px), 1, $color-grey);
		margin-bottom: 26px;
	}
}

.share-form-data{
	&__label{
		display: block;
		@include font(normal, 600, rem(14px), 1, $color-dark-grey);
		margin-bottom: 6px;
	}

	&__list{
		display: block;
		width: 100%;
		max-height: 265px;
		overflow-y: auto;
		border: 1px solid $color-light-grey;
		border-radius: 2px;
	}

	&__row{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&__row:nth-child(odd){
		background: rgba(242, 243, 245, 0.9);
	}

	&__row:hover,
	&__row:nth-child(odd):hover{
		background: #e1e3e7;
	}

	&__col{
		padding: 5px 15px;
		height: rem(35px);
		white-space: nowrap;
	}

	&__col-name{
		@include font(normal, normal, rem(14px), rem(28px), $color-dark-grey);
		width: calc(60% - 46px);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__col-switch{
		width: calc(40% - 46px);
	}

	&__col-close{
		width: 46px;
	}

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

.input-number{
	position: relative;
	display: inline-block;

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

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

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

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

	&__arr{
		display: inline-block;
		width: 7px;
		height: 12px;
		position: absolute;
		@include top-center;
		right: 6px;
	}

	&__arr-up{
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 3.5px 4px 3.5px;
		border-color: transparent transparent $color-dark-blue transparent;
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 0;
	}

	&__arr-down{
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 4px 3.5px 0 3.5px;
		border-color: $color-dark-blue transparent transparent transparent;
		cursor: pointer;
		position: absolute;
		bottom: 0;
		left: 0;
	}

  input[type="text"]:focus + &__arr,
  input[type="text"]:hover + &__arr{
    display: inline-block;
  }

  input[disabled]:focus + &__arr,
  input[disabled]:hover + &__arr{
    display: none;
  }
}

.input-number-wrap{
  display: inline-block;
  vertical-align: middle;

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

  &__error{
    @include font(normal, normal, rem(12px), 1.57, $color-red);
  }
}

@media (max-width: 767px) {
	.form-site{
		&__item{margin-bottom: 20px;}
		&__btn{margin-top: 33px;}
	}

	.form-site-alert{
		position: static;
	}
}