/**
 * @function color
 * @description get color from 'colors' map by key
 * @param {String} $colorName
 * @default 'white'
 * @return {String} color value
 */
/**
 * @function text-colors
 * @description get color from 'text-colors' map by key
 * @param {String} $colorName
 * @default 'white'
 * @return {String} color value
 */
/*
Checks for a valid int

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (_is-int($value)) {
	z-index: $value;
}
```
 */
/*
Checks for a valid CSS length

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (_is-length($value)) {
	width: $value;
}
```
 */
/*
Checks for a valid number

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (_is-number($value)) {
	z-index: $value;
}
```
 */
/*
Checks for a valid string

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (_is-string($value)) {
	content: $value
}
```
 */
/*
Checks for a valid map

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (not _is-map($value)) {
	@error "Not a valid map";
}
```
 */
/*
Checks for a valid null

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (not _is-null($value)) {
	width: $value;
}
```
*/
/**
 * @function getMapSpeck
 * @description Common Function for check map value by key and return value
 * @param {Map} $map
 * @param {String} $mapKey
 * @return {String|Null}
 */
/**
 * @function def
 * @description Wrapper function for 'getMapSpeck' function
 * @verbose Get Map Value by "def" key
 * @param {Map} $map
 * @return {String|Null}
 */
/**
 * @function xxl
 * @description Wrapper function for 'getMapSpeck' function
 * @verbose Get Map Value by "xxl" key
 * @param {Map} $map
 * @return {String|Null}
 */
/**
 * @function xl
 * @description Wrapper function for 'getMapSpeck' function
 * @verbose Get Map Value by "xl" key
 * @param {Map} $map
 * @return {String|Null}
 */
/**
 * @function lg
 * @description Wrapper function for 'getMapSpeck' function
 * @verbose Get Map Value by "lg" key
 * @param {Map} $map
 * @return {String|Null}
 */
/**
 * @function md
 * @description Wrapper function for 'getMapSpeck' function
 * @verbose Get Map Value by "md" key
 * @param {Map} $map
 * @return {String|Null}
 */
/**
 * @function sm
 * @description Wrapper function for 'getMapSpeck' function
 * @verbose Get Map Value by "sm" key
 * @param {Map} $map
 * @return {String|Null}
 */
/**
 * @function xs
 * @description Wrapper function for 'getMapSpeck' function
 * @verbose Get Map Value by "xs" key
 * @param {Map} $map
 * @return {String|Null}
 */
/*
Return numeric value that doesn't have the unit.
### scss
```scss
//
// @param   length  $value  numeric value
// @return  int
//

$value: _strip-unit(10px); // => 10
```
 */
/*
Return the margin

* When coefficient is lenght return it as is
### scss
```scss
//
// @param   number   $coefficient
// @return  length
//

padding: _space(1);
```
 */
/*
Default font size

* If html is `font-size: 62.5%`, set `10`

### scss
```scss
$_base-font-size: 16;
```
 */
/*
Between the character and line of line-height

### scss
```scss
$_half-leading: 1 / 4;
```
 */
/*
Default line height rem

### scss
```scss
$_base-line-height: 1 + $_half-leading * 2rem;
```
 */
/*
Margin coefficient

### scss
```scss
$_margin-coefficient: 1;
```
*/
/*
Animation time

### scss
```scss
$_transition-duration: .1s;
```
*/
/*
Transition function timing

### scss
```scss
//
// @link  http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
//

$_transition-function-timing: ease;
```
*/
/**
 * @mixin response
 * @description use
 */
/**
 * @mixin media
 * @description wrapper for response mixin
 */
/*
The position shorthand

### scss
```scss
//
// @param  string  $position
// @param  length  $top
// @param  length  $right
// @param  length  $bottom
// @param  length  $left
// @param  int     $z-index
//

@include _position(absolute, 10px, null, null, 10px, 1);
```
 */
/*
Sets top

### scss
```scss
//
// @param  int  $coefficient
//

@include _top(1);
@include _top(10px);
@include _top(100%)
```
 */
/*
Sets right

### scss
```scss
//
// @param  int  $coefficient
//

@include _right(1);
@include _right(10px);
```
*/
/*
Sets bottom

### scss
```scss
//
// @param  int  $coefficient
//

@include _bottom(1);
@include _bottom(10px);
```
*/
/*
Sets left

### scss
```scss
//
// @param  int  $coefficient
//

@include _left(1);
@include _left(10px);
```
*/
/*
Transition helper

### scss
```scss
//
// @param  string  $property
//

a {
	@include _transition(color, font-size);
	color: #f00;
	font-size: 12px;
}
```
*/
/*
Transition function timing

### scss
```scss
//
// @link  http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
//

$_transition-function-timing: ease-out;
```
*/
.system-auth-social-services {
  margin-top: 15px;
}
.system-auth-social-services__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 440px;
  margin: auto;
}
@media all and (max-width: 576px) {
  .system-auth-social-services__list {
    max-width: 290px;
  }
}
.system-auth-social-services__item {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 15px;
}
.system-auth-social-services__item:first-child {
  margin-left: 0;
}
.system-auth-social-services__item:last-child {
  margin-right: 0;
}
.system-auth-social-services__icon {
  display: block;
  width: 45px;
  height: 45px;
  background: transparent url(images/social-sprite.svg?2) no-repeat center;
  border-radius: 50%;
  filter: grayscale(100%);
  transition: 200ms linear all;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px #e2e2e2;
  cursor: pointer;
}
.system-auth-social-services__icon:hover {
  filter: grayscale(0);
}
.system-auth-social-services__icon_bitrix24 {
  width: 132px;
  border-radius: 30px;
  background-position: center -314px;
}
.system-auth-social-services__icon_ua.system-auth-social-services__icon_bitrix24 {
  width: 132px;
  background-image: url(images/bitrix24-logo-ua.svg?2);
  background-size: 75%;
  background-position: 50% 60%;
  border-radius: 30px;
}
.system-auth-social-services__icon_en.system-auth-social-services__icon_bitrix24,
.system-auth-social-services__icon_br.system-auth-social-services__icon_bitrix24,
.system-auth-social-services__icon_de.system-auth-social-services__icon_bitrix24,
.system-auth-social-services__icon_es.system-auth-social-services__icon_bitrix24,
.system-auth-social-services__icon_pl.system-auth-social-services__icon_bitrix24 {
  width: 132px;
  background-image: url(/images/content_common/logo/bitrix24_logo_blue.svg?2);
  background-size: 75%;
  background-position: center;
  border-radius: 30px;
}
.system-auth-social-services__icon_twitter {
  background-position: center -270px;
}
.system-auth-social-services__icon_vkontakte {
  background-position: center 0;
}
.system-auth-social-services__icon_mymailru {
  background-position: center -360px;
}
.system-auth-social-services__icon_facebook {
  background-position: center -180px;
}
.system-auth-social-services__icon_google {
  background-position: center -90px;
}