.custom-select {
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    background: #fff;
    cursor: pointer;
    padding: 8px 5px;
    max-width: 150px;
    width: 100%;
    margin-left: .2rem;
}

.custom-select .lbl {
    color: #5D5D5D;
}

.custom-select .arrow {
    border: solid #5D5D5D;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left: auto;
    margin-top: 6px;
}

.custom-select .arrow.right {
    transform: rotate(-45deg);
}

.custom-select .arrow.down {
    transform: rotate(45deg);
}

.custom-select .options-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: 500px;
    background: #fff;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    visibility: hidden;
    opacity: 0;
}

.custom-select.open .options-wrap {
    visibility: visible;
    opacity: 1;
}

.custom-select .options-wrap::-webkit-scrollbar-thumb {
    background: #F6A940;
}

.custom-select .options-wrap ul > li {
    padding: 8px 5px;
    border-bottom: solid #ccc;
    text-align: left;
    color: #5D5D5D;
}
.custom-select .options-wrap ul > li:focus {
    border: 1px solid #F6A940;
}

.select-form-control {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    gap: .3rem;
    font-size: .8rem;
}

.select-form-control input[type="radio"], .select-form-control input[type="checkbox"]  {
    position: relative;
    width: 1.2em;
    height: 1.2em;
    color: #5D5D5D;
    border: 1px solid #5D5D5D;
    border-radius: 4px;
    appearance: none;
    outline: 0;
    cursor: pointer;
    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
}

.select-form-control input[type="radio"]::before, .select-form-control input[type="checkbox"]::before {
    position: absolute;
    content: '';
    display: block;
    top: 0px;
    left: 3px;
    width: 7px;
    height: 12px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.select-form-control input[type="radio"]:checked::before, .select-form-control input[type="checkbox"]:checked::before  {
    opacity: 1;
}

.select-form-control input[type="radio"]:checked, .select-form-control input[type="checkbox"]:checked {
    border-color: #F6A940;
    background: #F6A940;
}

.select-form-control input[type="radio"]:checked ~ span, .select-form-control input[type="checkbox"]:checked ~ span {
    color: #F6A940;
}
.custom-select .options-wrap ul > li  ul { display: none; }
.custom-select .options-wrap ul > li  ul li { border: none; }