/******************** Select ******************* */

.select {
	/* Растягиваем блок на 100% родительского блока, для правильного размещения кастомной стрелочки */
	width: 100%;

	/* Убираем браузерную стрелку */
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	/* Задаем свой фон и рамку */
	border: 1px solid #7E9BBD;
	border-radius: 6px;
	background-color: #fff;

	/* Отступы от рамки к тексту */
	padding: 10px 35px 10px 15px;

	/* Убираем баузерную обводку*/
	outline: none;

	cursor: pointer;
}

/* Убираем стрелочку в IE 10 и 11 
.select::-ms-expand {
	display: none;
}
*/

/* По клику - убираем обводку и добавляем свою*/
.select:focus {
	outline: none;
	box-shadow: 0px 0px 0px 1px #38577a, 0px 0px 10px #7e9bbd;
}

/* Делаем .select-wrapper родительским элементом для позиционирования "стрелочки" */
.select-wrapper {
	position: relative;
}

/* Рисуем стрелочку */
.select-wrapper::before {
	content: "";

	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);

	display: block;

	/* Рисуем треугольник */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10.4px 6px 0 6px;
	border-color: #7e9bbd transparent transparent transparent;

	/* Снимаем клик с треугольника */
	pointer-events: none;
}

/******************** Select c dropdown на JS ********************/

.dropdown {
	position: relative;
	--cb-height:auto;
	--cb_border-radius:5px;
	--cb_border-color:var(--border-blue);
	--cb_font-weight:700;
	--cb_font-size:16px;
	--cb_highlite:var(--border-blue-light);
	--cb_background:var(--background);
	--cb_shadow:var(--primary-shadow);
}

.dropdown__button {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;

	background-color: var(--cb_background);
	border: 2px solid;
	border-color:var(--cb_border-color);
	border-radius:var(--cb_border-radius);
	height: var(--cb-height);
	box-shadow: 3px 7px 20px var(--cb_shadow);  /* rgba(70, 95, 90, 0.16) */

	font:var(--font);
	font-weight:var(--cb_font-weight);
	font-size:var(--cb_font-size);
	line-height: 1em;

	/*  padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 35px; */
	padding: 1em;
	padding-right: calc(1em + 10px);  /* добавили место для стрелочки*/

	cursor: pointer;

}

.dropdown__button:hover {
	background-color:var(--cb_highlite); 
}

.dropdown__button:focus, .dropdown__button--active {
	outline: none;
	box-shadow: 0 0 0 4px var(--cb_shadow);   /* rgba(176, 198, 225, 0.6); */
}

.dropdown__button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);

	/* Рисуем треугольник */
    width: 0;
    height: 0;
    border-width: 10.4px 6px 0 6px;
    border-color: var(--cb_border-color) transparent transparent transparent;
	border-style: solid;
	
	/* Снимаем клик с треугольника */
	pointer-events: none;
}


.dropdown__list {
	display: none;

	position: absolute;
	left: 0;
	top: calc(var(--cb-height) + 2px);  /* 52 px */
	width: 100%;
	margin: 0;
	padding: 0;

	list-style-type: none;
	background: white;
	opacity:0.9;
	box-shadow: 0px 4px 8px var(--cb_shadow);
	border-radius:var(--cb_border-radius);
	overflow: hidden;

	font:var(--font);
	font-weight:var(--cb_font-weight);
	font-size:var(--cb_font-size);
	line-height: 1em;

	z-index: 1;
}

.dropdown__list--visible {
	display:block;
}

.dropdown__list-item {
	margin: 0;
	padding: 0;
	border: 2px solid var(--cb_border-color);  /*  #7E9BBD  */
	border-bottom: 0px;
	padding: 1em 2em;  
	/*  padding: 13px 20px;  */
	cursor: pointer;
}

.dropdown__list-item:first-child {
	border-radius:  var(--cb_border-radius) 0 0;
}

.dropdown__list-item:last-child {
	border-radius: 0 0 var(--cb_border-radius) var(--cb_border-radius);
	border-bottom: 2px solid var(--cb_border-color);
}

.dropdown__list-item:hover {
	background: var(--cb_highlite);
}

.dropdown__input-hidden {
	display:none;  
}