/* Start:/local/templates/lodki/components/bitrix/sale.personal.section/.default/style.css?16257515585062*/
@media all {
	.personal_wr {
		display: flex;
		background-color: #f4f5f5;
		padding: 30px;
	}

	.personal_block._left {
		width: 36%;
		min-width: 360px;
		margin-right: 30px;
	}

	.personal_info {
		display: flex;
		align-items: center;
		margin-bottom: 30px;
	}

	.personal_img {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		min-width: 130px;
		width: 130px;
		height: 130px;
		margin-right: 20px;
		background: #ffde00;
		border-radius: 50%;
	}

	.personal_info .personal_icon {
		width: 45px;
		height: 50px;
	}

	.personal_edit_icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 38px;
		height: 38px;
		background-color: #8c5ba5;
		color: #fff;
		border: 3px solid #fff;
		border-radius: 50%;
		line-height: 18px;
	}

	.personal_edit_icon svg.edit_icon {
		width: 18px;
		height: 18px;
		fill: #fff;
	}

	.personal_info_wr {
		font-size: 15px;
	}

	.personal_title {
		font-size: 13px;
		color: #999;
	}

	.personal_exit {
		display: inline-block;
		margin-top: 15px;
		text-transform: uppercase;
		font-weight: 700;
	}

	.personal_block._right {
		width: 100%;
		background: #fff;
		box-shadow: 0px 0 4px -1px rgba(5, 5, 5, .25);
		padding: 40px 50px;
		margin: 0;
	}

	.personal_menu {
		border: 1px solid #dedede;
		padding: 30px 0;
	}

	.personal_menu_list {
		margin: 0;
		padding: 0;
	}

	.personal_menu_item {
		position: relative;
	}

	.personal_menu_link {
		display: block;
		font-weight: 700;
		line-height: 20px;
		color: #666;
		padding: 15px 30px;
	}

	.personal_menu_item.active .personal_menu_link {
		background: #ffde00;
		color: #231f20;
		text-decoration: none;
	}

	.personal_menu_item.active:after {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		right: -45px;
		border: 25px solid transparent;
		border-left: 20px solid #ffde00;
	}

	.sale-personal-section-index-block-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		transition: all 0.3s;
		border: 4px solid #8c5ba5;
		padding: 15px;
		height: 100%;
		color: #231f20;
		font-weight: 700;
		text-decoration: none;
	}

	.sale-personal-section-index-block-ico {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-bottom: 10px;
		background: #8c5ba5;
	}

	.sale-personal-section-index-block-link:hover .sale-personal-section-index-block-ico {
		transform: scale(1.1);
	}

	.sale-personal-section-index-block-ico svg {
		width: 50px!important;
		height: 100%;
		fill: #fff;
	}

	.sale-personal-section-index-block-name {
		max-width: 140px;
	}

	.personal-info-block-ico {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #8c5ba5;
	}

	.personal-info-block-ico svg {
		width: 20px;
		height: 100%;
		fill: #fff;
	}

	.personal-info-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.personal-info-block-text {
		text-align: left;
	}
}

@media (max-width: 1249px) {
	.personal_wr {
		padding: 30px 20px;
	}

	.personal_block._left {
		width: 40%;
		margin-right: 20px;
		min-width: 235px;
	}

	.personal_block._right {
		padding: 30px 20px;
	}

	.personal_info {
		flex-direction: column;
		align-items: flex-start;
	}

	.personal_img {
		min-width: 100px;
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}

	.personal_info .personal_icon {
		width: 35px;
	}

	.personal_edit_icon {
		right: -10px;
		bottom: -5px;
		width: 35px;
		height: 35px;
	}

	.personal_edit_icon svg.edit_icon {
		width: 15px;
		height: 15px;
	}

	.personal_menu {
		padding: 20px 0;
	}

	.personal_menu_item.active:after {
		right: -40px;
		border-left-width: 15px;
	}

	.personal_menu_link {
		padding: 15px;
	}
}

@media (max-width: 1023px) {
	.personal_wr {
		flex-direction: column;
		margin: 0 -20px;
	}

	.personal_block._left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin: 0 0 30px 0;
		flex-wrap: wrap;
	}

	.personal_block._left .personal_menu {
		min-width: 50%;
	}

	.personal_menu_item.active:after {
		display: none;
	}

	.personal_info {
		margin: 0;
	}

	.personal_block._right h3 {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.row.sale-personal-section-row-flex {
		margin-left: -10px;
		margin-right: -10px;
	}

	.row.sale-personal-section-row-flex [class*="col-"] {
		padding-left: 10px;
		padding-right: 10px;
	}

	.sale-personal-section-index-block-ico {
		width: 80px;
		height: 80px;
	}

	.sale-personal-section-index-block-ico svg {
		width: 40px;
	}
}

@media (max-width: 559px) {
	.personal_block._left {
		justify-content: space-between;
	}

	.personal_menu_link {
		padding: 10px 15px;
	}
}

@media (max-width: 479px) {
	.personal_wr {
		padding: 20px 10px;
		margin: 0 -10px;
	}

	.personal_block._left {
		flex-direction: column;
	}

	.personal_info {
		flex-direction: row;
		align-items: center;
		margin-bottom: 20px;
	}

	.personal_block .personal_menu {
		width: 100%;
	}

	.personal_block._right {
		padding: 20px 10px;
	}
}

/* End */


/* Start:/local/js/citrus/vue/vue-select/dist/main.bundle.css?16618436365955*/
.v-select {
  position: relative;
  font-family: inherit;
}

.v-select,
.v-select * {
  box-sizing: border-box;
}

/* KeyFrames */
@-webkit-keyframes vSelectSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes vSelectSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Dropdown Default Transition */
.vs__fade-enter-active,
.vs__fade-leave-active {
  transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.vs__fade-enter,
.vs__fade-leave-to {
  opacity: 0;
}

/** Component States */
/*
 * Disabled
 *
 * When the component is disabled, all interaction
 * should be prevented. Here we modify the bg color,
 * and change the cursor displayed on the interactive
 * components.
 */
.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__clear,
.vs--disabled .vs__search,
.vs--disabled .vs__selected,
.vs--disabled .vs__open-indicator {
  cursor: not-allowed;
  background-color: #f8f8f8;
}

/*
 *  RTL - Right to Left Support
 *
 *  Because we're using a flexbox layout, the `dir="rtl"`
 *  HTML attribute does most of the work for us by
 *  rearranging the child elements visually.
 */
.v-select[dir=rtl] .vs__actions {
  padding: 0 3px 0 6px;
}
.v-select[dir=rtl] .vs__clear {
  margin-left: 6px;
  margin-right: 0;
}
.v-select[dir=rtl] .vs__deselect {
  margin-left: 0;
  margin-right: 2px;
}
.v-select[dir=rtl] .vs__dropdown-menu {
  text-align: right;
}

/**
    Dropdown Toggle

    The dropdown toggle is the primary wrapper of the component. It
    has two direct descendants: .vs__selected-options, and .vs__actions.

    .vs__selected-options holds the .vs__selected's as well as the
    main search input.

    .vs__actions holds the clear button and dropdown toggle.
 */
/*.vs__dropdown-toggle {
  appearance: none;
  display: flex;
  padding: 0 0 4px 0;
  background: none;
  border: $border-width $border-style $border-color;
  border-radius: $border-radius;
  white-space: normal;
}*/
.vs__selected-options {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  flex-wrap: wrap;
  padding: 0 2px;
  position: relative;
}

.vs__actions {
  display: flex;
  align-items: center;
  padding: 4px 6px 0 3px;
}

/* Dropdown Toggle States */
.vs--searchable .vs__dropdown-toggle {
  cursor: text;
}

.vs--unsearchable .vs__dropdown-toggle {
  cursor: pointer;
}

.vs--open .vs__dropdown-toggle {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.vs__open-indicator {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, transparent 50%, #000 50%);
  transform: rotate(45deg);
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
}

.vs--open .vs__open-indicator {
  top: 25px;
  background: linear-gradient(-45deg, transparent 50%, #000 50%);
}

.vs--loading .vs__open-indicator {
  opacity: 0;
}

/* Clear Button */
.vs__clear {
  fill: rgba(60, 60, 60, 0.5);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  margin-right: 8px;
}

/* Dropdown Menu */
.vs__dropdown-menu {
  display: block;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 1000;
  padding: 5px 0;
  margin: 0;
  width: 100%;
  max-height: 350px;
  min-width: 160px;
  overflow-y: auto;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-top-style: none;
  border-radius: 0 0 4px 4px;
  text-align: left;
  list-style: none;
  background: #fff;
}

.vs__no-options {
  text-align: center;
}

/* List Items */
.vs__dropdown-option {
  line-height: 1.42857143;
  /* Normalize line height */
  display: block;
  padding: 3px 20px;
  clear: both;
  color: #333;
  /* Overrides most CSS frameworks */
  white-space: nowrap;
}
.vs__dropdown-option:hover {
  cursor: pointer;
}

.vs__dropdown-option--highlight {
  background: #5897fb;
  color: #fff;
}

/* Selected Tags */
.vs__selected {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  color: #333;
  line-height: 1.4;
  position: absolute;
  font-size: 14px;
  top: 25px;
  left: 25px;
  right: 25px;
  margin: 0;
  padding: 0;
  border: none;
}

.vs__deselect {
  display: inline-flex;
  appearance: none;
  margin-left: 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  fill: rgba(60, 60, 60, 0.5);
  text-shadow: 0 1px 0 #fff;
}

/* States */
.vs--single .vs__selected {
  background-color: transparent;
  border-color: transparent;
}
.vs--single.vs--open .vs__selected {
  position: absolute;
  opacity: 0.4;
}
.vs--single.vs--searching .vs__selected {
  display: none;
}

/* Search Input */
.vs__search::-webkit-search-decoration,
.vs__search::-webkit-search-cancel-button,
.vs__search::-webkit-search-results-button,
.vs__search::-webkit-search-results-decoration,
.vs__search::-ms-clear {
  display: none;
}

/*.vs__search,
.vs__search:focus {
  appearance: none;
  line-height: $line-height;
  font-size: $font-size;
  border: 1px solid transparent;
  border-left: none;
  outline: none;
  margin: 4px 0 0 0;
  padding: 0 7px;
  background: none;
  box-shadow: none;
  width: 0;
  max-width: 100%;
  flex-grow: 1;
}*/
.vs__search::placeholder {
  color: inherit;
}

/**
    States
 */
.vs--unsearchable .vs__search {
  opacity: 1;
}
.vs--unsearchable .vs__search:hover {
  cursor: pointer;
}

.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
  opacity: 0.2;
}

/* Loading Spinner */
.vs__actions .loading-circle {
  align-self: center;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 14px;
  right: 20px;
  padding: 0;
}

.vs__actions .loading-circle,
.vs__actions .loading-circle:after {
  width: 26px;
  height: 26px;
  background-size: 26px;
}

/* Loading Spinner States */
.vs--loading .loading-circle {
  opacity: 1;
}

.vs--loading .vs__dropdown-toggle {
  cursor: not-allowed;
}
/* End */
/* /local/templates/lodki/components/bitrix/sale.personal.section/.default/style.css?16257515585062 */
/* /local/js/citrus/vue/vue-select/dist/main.bundle.css?16618436365955 */