.SumoSelect > .CaptionCont {
    padding: 1rem 1.5rem;
    background: #fff;
    border: 0;
    border-radius: 0.5rem;
}

.SumoSelect > .CaptionCont > span {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-default);
}

.SumoSelect > .CaptionCont > label { width: 3.813rem; }

.SumoSelect > .CaptionCont > label > i {
    width: 0.75rem;
    height: 0.375rem;
    background: url('../../img/caret-down.svg') no-repeat center center;
    background-size: cover;
}

.SumoSelect > .optWrapper {
    border: none;
    border-radius: 0.5rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: var(--shadow-box);
}

.SumoSelect.open > .CaptionCont {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.SumoSelect.open > .optWrapper { top: 100%; }

.SumoSelect > .optWrapper > .options {
    max-height: 300px;
    border-radius: 0;
}

.SumoSelect > .optWrapper > .options li.opt {
    padding: 1rem 1.5rem;
    border-radius: 0 !important;
    cursor: pointer;
}

.SumoSelect > .optWrapper > .options li label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-default);
}

.SumoSelect > .optWrapper > .options li.opt.selected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.SumoSelect > .optWrapper > .options li.opt.selected::after {
    display: block;
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.625rem;
    margin-left: auto;
    background: url(../../img/primary-check.svg) no-repeat center center;
    background-size: cover;
    content: '';
}

@media ( hover: hover ) {
    .SumoSelect > .optWrapper > .options li.opt:hover { background: var(--color-body); }
}