﻿.food-dropdown {
    position: relative;
    font-family: Raleway;
}

    .food-dropdown select {
        display: none; /*hide original SELECT element:*/
    }

div .select-selected {
    background-color: #fff;
    border: 1px solid #002800;
    border-color: #002800 #002800 #002800 #002800;
}

.select-selected.select-arrow-active {
    border-color: #002800 #002800 #fff #002800;
}

    .select-selected.select-arrow-active::before {
        background-image: linear-gradient(#fff 0%, #fff 10%, #002800 10%, #002800 90%, #fff 90%, #fff 100%);
        width: calc(100% - 2em);
        height: 1px;
        content: "";
        position: absolute;
        bottom: 0;
        left: 1em;
    }


.validation-message ~ .select-selected {
    border: 1px solid #F45846;
}

    .validation-message ~ .select-selected.select-arrow-active {
        border: 1px solid #F45846;
        border-color: #F45846 #F45846 transparent #F45846;
    }

.validation-message ~ .select-items {
    border: 1px solid #F45846;
    border-color: transparent #F45846 #F45846 #F45846;
}

/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 25%;
    right: 8px;
    width: 1em;
    height: 50%;
    background-image: url(/img/sipky.svg);
    background-repeat: no-repeat;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    background-image: url(/img/sipky-inverted.svg);
}

/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    color: #002800;
    padding: 8px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #002800;
    border-color: transparent #002800 #002800 #002800;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover {
    background-color: #a6c54d;
}

.same-as-selected {
    color: #fff !important;
    background-color: #002800;
}
