.prettydropdown {
    min-width: 100% !important;
}

select {
    &.form-control{
        display: block;
        font-size: 18px;
        font-family: "Lato";
        color: rgba(64, 64, 64, 0.7);
        padding: 0.375rem 0.3rem 0.375rem 25px;
       
        max-width: 100%;
        margin: 0;
        height: 50px;
        border: 1px solid $light-grey;
        box-shadow: none;
        border-radius: 25em;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background-color: $light-grey;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat, repeat;
        background-position: right 0.7em top 50%, 0 0;
        background-size: 1.3em auto, 100%;
        transition: all 0.3s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    option {
        color: rgba(64, 64, 64, 1);
        font-family: sans-serif;
      }
    }
}
.prettydropdown ul {
    border: none;
    border-radius: 25px;
    background-color: $light-grey;

    li {
        padding-right: 25px;
        padding-left: 25px;
        color: rgba($color: $dark-grey, $alpha: .7);

        span {
            line-height: 46px;
        }

        &:before {
            right: 25px !important;
        }

        &:after {
            display: none !important;
        }
    }

    &:focus {
        background-color: $grey-hover;

        li {
            color: $dark-grey;
        }
    }

    &.active {
        background-color: #fff;
        box-shadow: $box-shadow;

        li.selected {
            text-decoration: underline;
            font-family: "Lato Bold";
        }

        li.selected, li.hover {
            background-color: $light-blue !important;
            color: $dark-grey !important;
        }
    }
}