/*Remove standard cross buttons in IE*/
input[type=text]::-ms-clear {
    display: none;
}

@media only screen and (min-width: 991px) and (max-width: 1250px) {
    input.form-control + span.clearButton {
        top: -30px !important;
    }

    span.select2 ~ span.clearButton {
        position: relative !important;
        top: -31px !important;
        margin-left: auto;
    }

    .buff-spec input.cl-decimal-data-type-flag + span.clearButton,
    .buff-spec input.no-arrow + span.clearButton {
        position: relative !important;
    }

    div.dropdown + span.clearButton {
        position: relative !important;
        top: -31px !important;
        margin-left: auto !important;
    }

    span.clearButton {
        height: 0px;
    }

    label.clear-btn-on ~ span.clearButton {
        position: absolute !important;
        top: 20% !important;
        right: 14% !important;
    }

    input[name=groupName] + span.clearButton {
        margin-left: 54% !important;
    }

    /*Priority of Tread Design Preferences*/
    .cl-drag-and-drop-header-select-container span.select2 ~ span.clearButton {
        top: 4px !important;
    }

    label[for$=DotPlantCode] + div input + span.clearButton {
        top: auto !important;
    }
}

@media only screen and (min-width: 540px) and (max-width: 990px) {
    label.clear-btn-on ~ span.clearButton {
        position: absolute !important;
        top: 15% !important;
        right: 55% !important
    }
}

    @media only screen and (max-width: 540px) {
        input.form-control + span.clearButton {
            top: -30px !important;
        }

        span.select2 ~ span.clearButton {
            top: -31px !important;
            margin-left: auto;
        }

        div.dropdown + span.clearButton {
            position: relative !important;
            top: -31px !important;
            margin-left: auto !important;
        }

        .buff-spec input.cl-decimal-data-type-flag + span.clearButton,
        .buff-spec input.no-arrow + span.clearButton {
            position: relative !important;
        }

        span.clearButton {
            height: 0px;
        }

        input[name=groupName] + span.clearButton {
            margin-left: auto !important;
        }

        /*Priority of Tread Design Preferences*/
        .cl-drag-and-drop-header-select-container span.select2 ~ span.clearButton {
            top: 4px !important;
        }

        label.clear-btn-on ~ span.clearButton {
            position: absolute !important;
            top: 18% !important;
            left: 35%;
        }

        label[for$=DotPlantCode] + div input + span.clearButton {
            top: auto !important;
            height: auto;
        }
    }

    input.form-control + span.clearButton {
        position: relative;
        margin-left: auto;
        right: 25px;
        padding-bottom: 3px;
    }

    input[type=search] + span.clearButton {
        position: absolute;
        right: 25px;
        top: 20%;
    }

    /*Manage Roles*/
    input#rolesSearch + span.clearButton {
        margin-left: auto;
        right: 54%;
        position: relative;
        top: -31px;
    }

    @media only screen and (max-width: 991px) {
        input#rolesSearch + span.clearButton {
            top: -30px !important;
        }

        #retreadInformationBlock div.flex-align-center span.clearButton {
            bottom: 32px;
            height: 0;
        }
    }

    @media only screen and (max-width: 1200px) {
        input#rolesSearch + span.clearButton {
            top: -30px !important;
        }
    }

    span.select2 ~ span.clearButton {
        position: relative;
        margin-top: 3px;
        align-self: baseline;
    }

    select[multiple] ~ span.select2 ~ span.clearButton {
        right: 25px;
    }

    select.cl-select-form-control + span.clearButton {
        position: absolute;
        top: 10%;
    }

    div.dropdown + span.clearButton {
        position: relative;
        top: -1px;
        margin-left: auto;
    }

label.clear-btn-on ~ span.clearButton {
    position: relative;
    top: 7%;
    right: 6%;

}

    span.flex-field > span.clearButton {
        right: 35px;
        top: 3px;
    }

    input:not([disabled]).form-control {
        padding-right: 30px;
    }

    select:disabled ~ span.clearButton {
        display: none !important;
    }

    /*Priority of Tread Design Preferences*/
    .cl-drag-and-drop-header-select-container span.select2 ~ span.clearButton {
        top: 4px;
    }

    /*Add/Edit Recommended Buff Spec & Add/Edit Buff Spec Exception*/
    .buff-spec input.cl-decimal-data-type-flag + span.clearButton,
    .buff-spec input.no-arrow + span.clearButton {
        position: absolute;
        top: 10%;
    }

    .buff-spec span.select2 + span.clearButton {
        top: 3px;
    }

    .buff-spec div.flex-align-center span.select2 + span.clearButton {
        top: 0px;
    }

    /*Sign In & Reset Password pages*/
    .sign-in-box input + span.clearButton,
    .reset-password-box input + span.clearButton {
        top: -31px;
        height: 0px;
    }

.clearButton {
    font-family: Tahoma, sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    display: none;
    background: none;
    font-size: 18px;
    color: darkgray;
    cursor: pointer;
    right: 40px;
    z-index: 10;
    width: 0px;
}

.clearButton:hover {
    color: black;
}

input[name=groupName] + span.clearButton {
    margin-left: 0px;
}

input[placeholder="YYYY-MM-DD"] + span.clearButton, input[placeholder="____-__-__"] + span.clearButton {
    padding: 2px 0;
    top: 0px !important;
}