.bg-light {
    background: #eef0f4;
}

.choices__list--dropdown .choices__item--selectable {
    padding-right: 0;
}

.choices__list--single {
    padding: 0;
}


.choices[data-type*=select-one]:after {
    right: 4.5rem;
}

.shadow {
    box-shadow: 0.3rem 0.3rem 1rem rgba(178, 200, 244, 0.23);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}

.selectpicker {
    border-radius: 30px !important;
    height: 45px !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    /* Para Safari */
    -moz-appearance: none !important;
    /* Para Firefox */
    border-color: #BABAC9;
    appearance: none !important;
    text-align-last: center !important;
    -moz-text-align-last: center !important;
}

.rounded{
    border-color: #ffffffe9 !important;
}

/* Estilo de inputs para formulario responsiva Equipo */
.input {
    --background: #fff;
    --border-default: #D0D0DF;
    --border-active: #3D6DF9;
    --shadow-default: #{rgba(#202048, .12)};
    --shadow-active: #{rgba(#3D6DF9, .25)};
    --text-color: #818190;
    --placeholder-color: #C9C9D9;
    --placeholder-color-hover: #BABAC9;
    --close: #818190;
    --close-light: #BABAC9;
    --close-background: #F1F1FA;
    width: 100%;
    max-width: 40em;
    display: flex;
    align-items: center;
    margin-top: 20px;
    position: relative;
    border-radius: 30px;
    background: var(--background);
    box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default)), 0 1px 3px var(--shadow, var(--shadow-default));
    transition: box-shadow .2s;
    --clear-x: 0px;
    --clear-swipe-left: 0px;
    --clear-swipe-x: 0;
    --clear-swipe: 0px;
    --clear-scale: 0;
    --clear-rotate: 0deg;
    --clear-opacity: 0;
    --clear-arrow-o: 1;
    --clear-arrow-x: 0px;
    --clear-arrow-y: 0px;
    --clear-arrow-offset: 4px;
    --clear-arrow-offset-second: 4px;
    --clear-line-array: 8.5px;
    --clear-line-offset: 27px;
    --clear-long-array: 8.5px;
    --clear-long-offset: 24px;

    &.clearing,
    &:focus-within {
        --border-width: 1.5px;
        --border: var(--border-active);
        --shadow: var(--shadow-active);
    }

    &.clearing {
        --close-background: transparent;
        --clear-arrow-stroke: var(--close-light);
    }

    .text {
        flex-grow: 1;

        input {
            -webkit-appearance: none;
            line-height: 24px;
            background: none;
            border: none;
            outline: none;
            display: block;
            width: 100%;
            margin: 0;
            padding: 12px 16px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color);

            &::placeholder {
                color: var(--placeholder-color);
                transition: color .2s;
            }
        }
    }

    &:hover {
        .text {
            input {
                &::placeholder {
                    color: var(--placeholder-color-hover);
                }
            }
        }
    }

    .clear {
        -webkit-appearance: none;
        position: relative;
        outline: none;
        z-index: 1;
        padding: 0;
        margin: 12px 12px 12px 0;
        border: none;
        background: var(--b, transparent);
        transition: background .2s;
        border-radius: 70%;
        opacity: var(--clear-opacity);
        transform: scale(var(--clear-scale)) translateZ(0);

        &:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 12px;
            left: var(--clear-swipe-left);
            background: var(--background);
            transform-origin: 100% 50%;
            transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);
        }

        svg {
            display: block;
            position: relative;
            z-index: 1;
            width: 24px;
            height: 24px;
            outline: none;
            cursor: pointer;
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: var(--close);
            transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);

            path {
                transition: stroke .2s;

                &.arrow {
                    stroke: var(--clear-arrow-stroke, var(--close));
                    stroke-dasharray: 4px;
                    stroke-dashoffset: var(--clear-arrow-offset);
                    opacity: var(--clear-arrow-o);
                    transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);

                    &:last-child {
                        stroke-dashoffset: var(--clear-arrow-offset-second);
                    }
                }

                &.line {
                    stroke-dasharray: var(--clear-line-array) 28.5px;
                    stroke-dashoffset: var(--clear-line-offset);
                }

                &.long {
                    stroke: var(--clear-arrow-stroke, var(--close));
                    stroke-dasharray: var(--clear-long-array) 15.5px;
                    stroke-dashoffset: var(--clear-long-offset);
                    opacity: var(--clear-arrow-o);
                    transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
                }
            }
        }

        &:hover {
            --b: var(--close-background);
        }
    }
}