.dd-select-input-field {
     width: 100%;
}

.dd-select-input-option {
     display: flex;
     align-items: center;
     margin: 8px 0;
     cursor: pointer;
}

.dd-select-input-native {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}

.dd-select-input-icon {
     position: relative;
     flex: 0 0 18px;
     width: 18px;
     height: 18px;
     margin-right: 8px;
     border: 1px solid #c7ced9;
     background: #fff;
     transition: all .2s ease;
     box-sizing: border-box;
}

.dd-select-input-icon.radio {
     border-radius: 50%;
}

.dd-select-input-icon.checkbox {
     border-radius: 4px;
}

.dd-select-input-option.checked .dd-select-input-icon {
     border-color: #3480fb;
     background: #3480fb;
}

.dd-select-input-option.checked .dd-select-input-icon.radio::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #fff;
     transform: translate(-50%, -50%);
}

.dd-select-input-option.checked .dd-select-input-icon.checkbox::after {
     content: '';
     position: absolute;
     left: 5px;
     top: 1px;
     width: 5px;
     height: 10px;
     border: solid #fff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
}

.dd-select-input-option-text {
     margin-right: 8px;
     min-width: 32px;
}

.dd-select-input-text {
     flex: 1;
     min-width: 120px;
     border: none;
     border-bottom: 1px solid #ddd;
     outline: none;
     padding: 4px 2px;
     font-size: 14px;
     background-color: transparent;
}

.dd-select-input-text:disabled {
     color: #333;
     border-bottom-color: #eee;
     cursor: not-allowed;
}