.custom-select-2 {
    position: relative;
    font-family: Roboto;
}

.custom-select-2 select {
    display: none;
    /*hide original SELECT element:*/
}

.cus-select-selected {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.75) !important;
    border: 2px solid #4CA9EC !important;
    border-radius: 25px 25px 25px 25px;
}


.cus-select-selected-2 {
    background-color: transparent;
    border: 2px solid #4CA9EC;
    border-bottom-style: none !important;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/*style the arrow inside the select element:*/
.cus-select-selected::after {
    font-family: 'Font Awesome 5 Free';
    content: "\f078";
    color: #4CA9EC;
    font-weight: 900;
    transition: all 0.5s;
    float: right;
}

/*point the arrow upwards when the select box is open (active):*/
.cus-select-selected.cus-select-arrow-active::after {
    /* font-family: 'Font Awesome 5 Free'; */
    content: "\f077";
}

.cus-select-items::-webkit-scrollbar{
    display: none;
}

.cus-select-items div,
.cus-select-selected{
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 16px;
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
}

/*style items (options):*/
.cus-select-items {
    position: relative;
    background-color: transparent;
    max-height: 10rem;
    overflow: auto;
    width: 100%;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 0;
    border: 2px solid #4CA9EC;
    border-top-style: none !important;
    border-radius: 0 0 25px 25px;
    -ms-overflow-style: none !important;

}

/*hide the items when the select box is closed:*/
.cus-select-hide {
    display: none;
}

.cus-select-items div.hov:hover,
.cus-same-as-selected {
    border-radius: 25px;
    color: #4CA9EC !important;
}

.cus-select-items div.nonhov{
    cursor: context-menu;
}