.fancy-dropdown select {
    position: absolute;
    z-index: 999;
}

.fancy-dropdown.validation-visualizer.has-error {
    margin-bottom: 30px;
}

.fancy-dropdown.validation-visualizer:not(.has-error):not(.has-focus) {   
    border: 1px solid rgb(204, 204, 204);
}

.fancy-dropdown.validation-visualizer.has-error .validation-message {
    position: absolute;
    display: block
}

.fancy-dropdown.validation-visualizer {
    border-radius: 6px;
    height: 45px;
    width: 100%;
    position: relative;
}

.fancy-dropdown.has-focus {
    box-shadow: 0 0 5px rgb(105,176,232);
    border: 1px solid rgb(102,175,233);
    outline: none;
}

.fancy-dropdown .custom-select select {
    opacity: 0;
    width: 100%;
    height: 100%;
}

.fancy-dropdown .custom-select select option {
    opacity: 1;
}

.fancy-dropdown .custom-select {
    border: none;
    box-shadow: none;
    outline: none;
    width: 100%;
    height: 100%;
    position: relative;
    background-image:
        linear-gradient(45deg, transparent 50%, #777777 50%),
        linear-gradient(135deg, #777777 50%, transparent 50%);
    background-position:
        calc(100% - 15px) 1.5em,
        calc(100% - 10px) 1.5em;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
}

.fancy-dropdown.validation-visualizer.has-error .custom-select {
    background-position:
        calc(100% - 32px) 1.5em,
        calc(100% - 27px) 1.5em;
}

.fancy-dropdown .custom-option-selected {
    position: absolute;    
    top: 11px;
    left: 17px;
}

.fancy-dropdown select:invalid ~ .custom-option-selected {
    color: #999999;
}

.fancy-dropdown select option[disabled=disabled] {
    display: none;
}

.fancy-dropdown select option:not([disabled=disabled]) {
    color: black;
}