﻿span.msg,
span.choose {
    color: #555;
    padding: 5px 0 10px;
    display: inherit
}

.select-container {
    margin: 50px auto 0;
    text-align: center;
    margin-bottom: 7rem;
    display: flex;
    justify-content: space-around;
    max-width: 500px;
    column-gap: 1rem;
}

/*Styling Selectbox*/
.select-dropdown {
    width: 200px;
    display: inline-block;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 0 2px rgb(204, 204, 204);
    transition: all .5s ease;
    position: relative;
    font-size: .8rem;
    color: #474747;
    height: 100%;
    text-align: center;
}

    .select-dropdown:focus-visible {
        outline: none;
    }

    .select-dropdown .select {
        cursor: pointer;
        display: block;
        padding: 8px;
    }

        .select-dropdown .select > i {
            font-size: .8rem;
            color: #888;
            cursor: pointer;
            transition: all .3s ease-in-out;
            float: right;
            line-height: 20px;
        }

    .select-dropdown:hover {
        box-shadow: 0 0 4px rgb(204, 204, 204);
    }

    .select-dropdown:active {
        background-color: #f8f8f8;
    }

    .select-dropdown.active:hover,
    .select-dropdown.active {
        box-shadow: 0 0 4px rgb(204, 204, 204);
        border-radius: 2px 2px 0 0;
        background-color: #f8f8f8;
    }

        .select-dropdown.active .select > i {
            transform: rotate(-90deg)
        }

    .select-dropdown .select-dropdown-menu {
        position: absolute;
        background-color: #fff;
        width: 100%;
        left: 0;
        margin-top: 1px;
        box-shadow: 0 1px 2px rgb(204, 204, 204);
        border-radius: 0 1px 2px 2px;
        overflow: hidden;
        display: none;
        max-height: 93.6px;
        overflow-y: auto;
        z-index: 9;
    }

        .select-dropdown .select-dropdown-menu li {
            padding: 6px;
            transition: all .2s ease-in-out;
            cursor: pointer
        }

    .select-dropdown .select-dropdown-menu {
        padding: 0;
        list-style: none
    }

        .select-dropdown .select-dropdown-menu li:hover {
            background-color: #f2f2f2
        }

        .select-dropdown .select-dropdown-menu li:active {
            background-color: #e2e2e2
        }

@media (max-width:300px) {
    .select-dropdown {
        font-size: .6rem;
    }
}
