:root{
    --controls--color : var(--main-black-color);
    --controls-border-placeholder-color: var(--main-darknest-gray-color);
    --controls-placeholder-color: var(--main-dark-gray-color);
    --controls-background-color:#fff;
    --color-background: var(--main-gray6-color);
    --controls-hover-color: var(--main-dark-gray-color);
    --transition-type: ease-in-out;
    --transition-time: 0.2s;
    --controls-active-color: var(--main-blue-color);
    --controls-error-color: var(--main-error-color);
    --сountry-color: var(--main-gray-color);
    --border-radius: 5px;
    --controls-height: 60px;
    --controls-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
}

.custom_multiselect {
    margin-bottom: 0;
    font-size: var(--controls--color);
    color: var(--controls--color);
    /* height: var(--controls-height); */
    min-height: var(--controls-height);
    position: relative;
}
.custom_multiselect .multiselect__content-wrapper{
    line-height: 0;
}
.custom_multiselect .multiselect__spinner {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
}
.custom_multiselect .multiselect__spinner:before,
.custom_multiselect .multiselect__spinner:after{
    border-color: var(--main-blue-color, #41b883) transparent transparent;

}

.custom_multiselect:after {
    color: var(--controls-border-placeholder-color);
    position: absolute;
    content: attr(topplaceholder);
    background: white;
    left: 12px;
    top: -7px;
    font-size: 14px;
    padding: 0 6px;
    line-height: 100%;
    background: var(--controls-background-color);
    background: linear-gradient(180deg, var(--color-background) 50%, var(--controls-background-color) 50%);
}

.custom_multiselect .multiselect__select{
    height: 100%;
    line-height: 100%;
}
.custom_multiselect .multiselect__select:before{
    top: 50%;
    transform: translateY(-50%);
    color:var(--controls-placeholder-color);
    border-top-color:var(--controls-placeholder-color);
    line-height: 150%;
}

.custom_multiselect .multiselect__tags{
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    padding: 0 1.7rem 0 1.0625rem;
    box-shadow: var(--controls-box-shadow, 0px 1px 2px 0px rgba(27, 27, 27, 0.10) );
    transition: border var(--transition-time) var(--transition-type);
    min-height: var(--controls-height);
    border: 1px solid var(--controls-background-color);

    flex-wrap: wrap;
    column-gap: 5px;
}


.custom_multiselect:hover .multiselect__tags {
    border: 1px solid var(--controls-hover-color);
}
.custom_multiselect.multiselect--active .multiselect__tags {
    border: 1px solid var(--controls-active-color);
}
.custom_multiselect.invalid .multiselect__tags {
    border: 1px solid var(--controls-error-color);
}

.custom_multiselect .multiselect__single {
    margin: 0;
    padding: 0 0;
    border-radius: unset;
    line-height: unset !important;
}

.custom_multiselect .multiselect__placeholder {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
    color: var(--controls-placeholder-color);
    font-size: 16px;
}
.custom_multiselect.arrival_airport .multiselect__placeholder {
    padding-left: 35px;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url('/static/app/images/icons/selectize_arr_airport_icon.svg');
}
.custom_multiselect.departure_airport .multiselect__placeholder {
    padding-left: 35px;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url('/static/app/images/icons/selectize_dep_airport_icon.svg');
}

.custom_multiselect .multiselect__input {
    color: var(--controls--color);
    margin: 0 0 5px 0;
    padding: 0;
}

.custom_multiselect .multiselect__option--highlight.multiselect__option--selected,
.custom_multiselect .multiselect__option--highlight{
  background-color: #eee;
  color: var(--controls--color);
  outline: none;
}

.custom_multiselect .multiselect__option{
    padding: 6px 12px;
    display: flex;
    align-items: center;
}
.custom_multiselect .multiselect__tag{
    background-color: var(--main-blue-color);
}
.custom_multiselect .multiselect__tag-icon::after{
    color: #fff;
}
.custom_multiselect.multiselect--above.multiselect--active:after{
    content: none;
}


.value__label {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.option__airport_name,
.option__city,
.value__airport_name,
.value__city {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option__airport_name,
.value__airport_name {
    width: 100%;
    line-height: 1.125;
    font-weight: 500;
}
.value__country_city,
.option__country_city{
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--сountry-color);
    font-size: 14px;
    line-height: 130%;
}

.value__iata,
.value__icao,
.option__iata,
.option__icao{
    padding-right: 3px;
}

.value__image,
.option__image {
    display: flex;
    padding-right: 7px;
}
.value__image img,
.option__image img{
  width: 20px;
  max-height: 20px;
}

.option__country{
    display: flex;
}

/* ------------------------------------------------------------ */

.custom_multiselect.outline_custom_multiselect:after{
    /* bottom: calc(100% + 4px); */
    /* top: unset; */
    background: linear-gradient(180deg, var(--color-background) 50%, var(--color-background) 50%);
}

.custom_multiselect.outline_custom_multiselect.multiselect--active:after {
    background: linear-gradient(180deg, var(--color-background) 50%, var(--controls-background-color) 50%);

}
.custom_multiselect.outline_custom_multiselect:not(.multiselect--active) .multiselect__tags{
    border: 1px solid var(--main-border-control-color);
    background-color: var(--color-background);
    box-shadow: none;
}
.custom_multiselect.outline_custom_multiselect.invalid:not(.multiselect--active) .multiselect__tags {
    border: 1px solid var(--controls-error-color);
}

.custom_multiselect.outline_custom_multiselect .multiselect__input{
    background-color: transparent;
}
.custom_multiselect.outline_custom_multiselect .multiselect__single{
    background-color: transparent;
}

.custom_multiselect.multiselect__option--highlight::after{
    background-color: var(--controls-active-color);
}

.custom_multiselect.outline_custom_multiselect:hover .multiselect__tags {
    border: 1px solid var(--main-darknest-gray-color);
}

/* ------------------------------------------------------------- */


/* ------------------------------------------------ */

.dp__main{
    --dp-border-color: transparent;
    --dp-border-color-focus: var(--main-blue-color);
    --dp-input-padding: 15px;
    --dp_line-height: calc( var(--controls-height) - 2 * var(--dp-input-padding) );
    --dp-border-radius:var(--border-radius);
    --dp-danger-color: var(--main-error-color);
}
.dp__main .dp__input{
    height: var(--controls-height);
    line-height: var(--dp_line-height);
    padding:10px var(--dp-input-padding);
}

.dp__input_invalid{
    box-shadow: none;
    border: 1px solid var(--main-error-color);
}

.dp__time_picker_inline_container {
    margin-bottom: 15px;
}
.dp__btn:focus {
    background: none;
}
.dp_wrapper{
    border-radius: var(--dp-border-radius);
    box-shadow: var(--controls-box-shadow);
}