/***********
1. Colors
***********/

:root {
    --color-nice-blue       : #0f70af;
    --color-pale-olive-green: #a3cb93;
    --color-blue-grey       : #6b95b0;
    --color-light-grey-green: #afd69e;
    --color-light-grey      : #d9edd1;
    --color-turtle-green    : #6db74e;
    --color-faded-red       : #de444b;
    --color-white           : #ffffff;
    --color-steel           : #738896;
    --color-twilight-blue   : #084e7c;
    --color-box-shadow      : rgba(145, 147, 160, 0.25);
    --color-soft-olive-green: #ebf6e7;

    --font-400: 'Poppins-Regular', sans-serif;
    --font-500: 'Poppins-Medium', sans-serif;
    --font-600: 'Poppins-SemiBold', sans-serif;
    --font-700: 'Poppins-Bold', sans-serif;
}

/* DEFAULT THEME */

.custom-dropdown {
    height: 50px;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    font-family: var(--font-500);
    color: var(--color-steel);
    color: var(--color-blue-grey);
}
.custom-dropdown__select {
    border-radius: 5px;
    border: 1px solid var(--color-steel);
    width: 100%;
    height: 100%;
    padding: 0 20px 0 16px;
    color: inherit;
    outline: none;
    font-weight: inherit;
    transition: all ease-out 300ms;
    background-color: var(--color-white);
    font-family: inherit;
}
.custom-dropdown__select:focus {
    padding: 0 19px 0 15px;
    border-width: 2px;
}
.custom-dropdown__label {
    position: absolute;
    left: 20px;
    top: calc(50% - 9px);
    color: var(--color-nice-blue);
    opacity: 0;
    pointer-events: none;
    transition: all ease-out 300ms;
    font-weight: inherit;
}
.custom-dropdown--fill {
    color: var(--color-steel);
}
.custom-dropdown--fill .custom-dropdown__select {
    padding-top: 20px;
    padding-bottom: 2px;
}
.custom-dropdown--fill .custom-dropdown__label {
    opacity: 1;
    top: 4px;
}

/* SELECT2 */
.select2 {
    height: 100%;
}
.custom-dropdown .custom-dropdown__selection {
    height: 100%;
    border: 1px solid var(--color-steel);
    outline: none;
    border-radius: 5px;
}
.custom-dropdown .custom-dropdown__selection .select2-selection__rendered {
    padding: 4px 28px 4px 20px;
    height: 100%;
    display: flex;
    align-items: center;
    color: inherit;
}
.custom-dropdown .custom-dropdown__selection .select2-selection__arrow {
    height: 100%;
    width: 18px;
    right: 16px;
}
.custom-dropdown .custom-dropdown__selection .select2-selection__arrow b {
    background-image: url('/img/svg/arrow_down.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    border: none;
    left: calc(50% - 5px);
    top: calc(50% - 9px);
}
.custom-dropdown .select2-container--focus .custom-dropdown__selection,
.custom-dropdown .select2-container--open .custom-dropdown__selection {
    border-width: 2px;
    border-radius: 5px;
}
.custom-dropdown .select2-container--open.select2-container--above .custom-dropdown__selection {
    border-top: none;
    padding-top: 2px;
}
.custom-dropdown .select2-container--open.select2-container--below .custom-dropdown__selection {
    border-bottom: none;
    padding-bottom: 2px;
}
.custom-dropdown .select2-container--open .custom-dropdown__selection .select2-selection__rendered,
.custom-dropdown .select2-container--focus .custom-dropdown__selection .select2-selection__rendered {
    padding: 4px 27px 4px 19px;
}
.custom-dropdown .select2-container--open .custom-dropdown__selection .select2-selection__arrow b {
    transform: rotate(-180deg);
}
.custom-dropdown--fill .custom-dropdown__selection .select2-selection__rendered,
.custom-dropdown--fill .select2-container--open .custom-dropdown__selection .select2-selection__rendered,
.custom-dropdown--fill .select2-container--focus .custom-dropdown__selection .select2-selection__rendered {
    padding-top: 20px;
}

.custom-dropdown__dropdown {
    border: 2px solid var(--color-steel);
    border-radius: 5px;
    color: var(--color-steel);
    font-size: 15px;
    overflow: hidden;
    z-index: 99999;
    font-family: var(--font-400);
}
.custom-dropdown__dropdown.select2-dropdown--above {
    border-bottom: none;
}
.custom-dropdown__dropdown.select2-dropdown--below {
    border-top: none;
}
.custom-dropdown__dropdown .select2-search--dropdown {
    padding: 4px 12px;
}
.custom-dropdown__dropdown .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-steel);
    border-radius: 4px;
    outline: none;
    color: var(--color-nice-blue);
    font-family: var(--font-500);
    height: 36px;
    padding: 4px 8px;
    font-family: var(--font-500);
    font-size: 14px;
}
.custom-dropdown__dropdown .select2-results__option {
    padding: 8px 20px;
}
.custom-dropdown__dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-soft-olive-green);
    color: inherit;
}
.custom-dropdown__dropdown .select2-results__option[aria-selected=true] {
    background-color: rgba(	15, 112, 175, 0.12);
    color: var(--color-steel);
}
.custom-dropdown__dropdown .select2-results__option[aria-disabled=true] {
    color: #c0c0c0;
    cursor: not-allowed;
}

/* THEME: Rounded */
.custom-dropdown--rounded.custom-dropdown {
    height: 36px;
    font-size: 13px;
    color: var(--color-steel);
}
.custom-dropdown--rounded .custom-dropdown__select {
    border-radius: 18px;
    padding: 0 20px 0 16px;
    color: var(--color-nice-blue);
}
.custom-dropdown--rounded .custom-dropdown__select:focus {
    padding: 0 19px 0 15px;
}
.custom-dropdown--rounded .custom-dropdown__label {
    color: var(--color-steel);
    font-size: 12px;
}
.custom-dropdown--rounded.custom-dropdown--fill .custom-dropdown__select {
    padding-top: 12px;
}
.custom-dropdown--rounded.custom-dropdown--fill .custom-dropdown__select:focus {
    padding-top: 11px;
}
.custom-dropdown--rounded.custom-dropdown--fill .custom-dropdown__label {
    top: 3px;
}

.custom-dropdown--rounded .custom-dropdown__selection {
    border-radius: 18px;
}
.custom-dropdown--rounded .custom-dropdown__selection .select2-selection__arrow {
    width: 14px;
    right: 10px;
}
.custom-dropdown--rounded .custom-dropdown__selection .select2-selection__arrow b {
    width: 14px;
    height: 14px;
    left: calc(50% - 3px);
    top: calc(50% - 7px);
}
.custom-dropdown--rounded .select2-container--focus .custom-dropdown__selection,
.custom-dropdown--rounded .select2-container--open .custom-dropdown__selection {
    border-radius: 18px;
}
.custom-dropdown--rounded.custom-dropdown--fill .custom-dropdown__selection .select2-selection__rendered,
.custom-dropdown--rounded.custom-dropdown--fill .select2-container--open .custom-dropdown__selection .select2-selection__rendered,
.custom-dropdown--rounded.custom-dropdown--fill .select2-container--focus .custom-dropdown__selection .select2-selection__rendered {
    color: var(--color-nice-blue);
}

.custom-dropdown__dropdown--rounded {
    border-radius: 18px;
    overflow: hidden;
}

/* MOBILE VERSION */
@media only screen and (max-width: 600px) {
    .custom-dropdown .select2-container--focus .custom-dropdown__selection,
    .custom-dropdown .select2-container--open .custom-dropdown__selection,
    .custom-dropdown .select2-container--open.select2-container--above .custom-dropdown__selection,
    .custom-dropdown .select2-container--open.select2-container--below .custom-dropdown__selection {
        border-radius: 5px;
    }
    .custom-dropdown .select2-container--open.select2-container--above .custom-dropdown__selection {
        border-top: 2px solid var(--color-steel);
        padding-top: 0;
    }
    .custom-dropdown .select2-container--open.select2-container--below .custom-dropdown__selection {
        border-bottom: 2px solid var(--color-steel);
        padding-bottom: 0;
    }
    .custom-dropdown .select2-container--open .custom-dropdown__selection::after {
        content: "";
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        z-index: 99998;
        background-color: rgba(8, 78, 124, 0.69);
    }
    .custom-dropdown__dropdown {
        min-width: 100vw;
        background-color: var(--color-white);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99999;
        border: none;
        border-radius: 0;
        padding-top: 16px;
    }
    .custom-dropdown__dropdown.select2-dropdown--above,
    .custom-dropdown__dropdown.select2-dropdown--below {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .custom-dropdown__dropdown .select2-results__option {
        padding: 12px 20px;
        position: relative;
        text-align: center;
    }
    .custom-dropdown__dropdown .select2-results__option::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: rgba(	15, 112, 175, 0.12);
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .custom-dropdown--rounded .select2-container--focus .custom-dropdown__selection,
    .custom-dropdown--rounded .select2-container--open .custom-dropdown__selection,
    .custom-dropdown--rounded .select2-container--open.select2-container--above .custom-dropdown__selection,
    .custom-dropdown--rounded .select2-container--open.select2-container--below .custom-dropdown__selection {
        border-radius: 18px;
    }
}