.drop-down-component-root {
    border: 2px dashed rgb(0, 0, 0);
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 0 0 12px #000;
    position: relative;
    opacity: 0.7;

    &:hover {
        cursor: pointer;
        opacity: 1;
        color: rgb(179, 179, 179);
    }

    .dropdown-body {
        border: 2px dashed rgb(0, 0, 0);
        padding: 10px;
        margin: 75px 0px;
        border-radius: 5px;
        box-shadow: 0 0 12px #000;
        position: absolute;
        top: 0;
        left: 0;
        width: 95%;
        z-index: 999;
        background-color: #384452;
    }

    .body-item {
        padding: 10px;
        opacity: 0.7;
        border-radius: 5px;
    }

    .body-item:hover {
        cursor: pointer;
        opacity: 1;
        background-color: #252d36;
    }

    .icon {
        background-image: url('../../assets/arrow.png');
        background-color: #d3d3d3;
        background-position: center center;
        background-size: 38px 38px;
        height: 38px;
        width: 38px;
        display: inline-block;
        transform: rotate(0deg);
        transition: rotate 1s;
        border-radius: 100%;
        margin: 5px;
    }

    .selected-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .selected-item-text {
        display: inline-block;
    }

    .body-expanded {
        rotate: 90deg !important;
    }
}