/* select - custom */
.custom-select {position: relative; width: 240px; max-width: 100%;}
.custom-select.full {width: 100% !important;}
.custom-select select {display: none;}
.custom-select button {text-decoration: none; background: none; border: 0; outline: 0; white-space: nowrap; cursor: pointer; letter-spacing: -0.04em;}
.custom-select .select-selected,
.custom-select .select-option button {padding: 7px 10px; width: 100%; line-height: 20px; font-size: 16px; color: #3a3c46; cursor: pointer; user-select: none; text-align: left; box-sizing: border-box;}

.custom-select .select-selected {position: relative; padding-right: 30px; color: #969bb5; background-color: #fff; border: 1px solid #d9dceb; border-radius: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.custom-select.selected .select-selected {color: #3a3c46;}

.custom-select .select-selected:after {position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 34px; height: 34px; background: #fff url(../images/i-select-arrow.png) center center no-repeat;}

.custom-select .select-selected.active {color: #3a3c46; border-color: #3c5ef0; z-index: 50;}
.custom-select .select-selected.active:after {background-image: url(../images/i-selected-arrow.png);}

.custom-select .select-option {position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; padding: 10px 9px; max-height: 175px; background-color: #fff; border: 0; border-radius: 4px; box-shadow: 0 0 24px 0.16px rgba(90, 102, 139, 0.15); z-index: 30; box-sizing: border-box; overflow-y: auto;}
.custom-select .select-hide {display: none;}
.custom-select .select-option button:hover {color: #fff; background-color: #3c5ef0; border-radius: 4px;}

@media (max-width: 768px) {
    .custom-select {width: 100%;}
    .custom-select .select-selected:after {background-size: 13px auto !important;}
}