input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], select {
    box-sizing: border-box;
    width: 100%;
    height: calc(3em + 2px);
    margin: 0 0 1em;
    padding: 1em;
    border: 1px solid #ccc;
    background: #fff;
    resize: none;
    outline: none;
}

select {
    padding: unset;
    padding-left: 1em;
}

    input[type="text"] + label[placeholder],
    input[type="number"] + label[placeholder],
    input[type="email"] + label[placeholder],
    input[type="password"] + label[placeholder],
    input[type="search"] + label[placeholder],
    select + label[placeholder] {
        display: block;
        pointer-events: none;
        line-height: 1.25em;
        margin-top: calc(-3em - 2px);
        margin-bottom: calc((3em - 1em) + 2px);
        padding-left: 5px;
    }

        input[type="text"] + label[placeholder]:before,
        input[type="number"] + label[placeholder]:before,
        input[type="email"] + label[placeholder]:before,
        input[type="password"] + label[placeholder]:before,
        input[type="search"] + label[placeholder]:before,
        select + label[placeholder]:before {
            content: attr(placeholder);
            display: inline-block;
            margin: 0 calc(0em + 0px);
            padding: 0 0px;
            color: #898989;
            white-space: nowrap;
            -webkit-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            background-image: -webkit-linear-gradient(top, #fff, #fff);
            background-image: linear-gradient(to bottom, #fff, #fff);
            background-size: 100% 5px;
            background-repeat: no-repeat;
            background-position: center;
        }

    input[type="text"]:required + label:after,
    input[type="number"]:required + label:after,
    input[type="email"]:required + label:after,
    input[type="password"]:required + label:after,
    input[type="search"]:required + label:after,
    select:required + label:after {
        content: "*";
        display: inline-block;
        margin: 0 calc(0em + 0px);
        padding: 0 0px;
        color: red;
        white-space: nowrap;
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        background-image: -webkit-linear-gradient(top, #fff, #fff);
        background-image: linear-gradient(to bottom, #fff, #fff);
        background-size: 100% 5px;
        background-repeat: no-repeat;
        background-position: center;
        font-weight: bold;
    }

.stickHeader:not([readonly]):focus,
.ui-keyboard-input-current {
    border-color: #00bafa;
}

    .stickHeader:not([readonly]):focus + label[placeholder]:before,
    .ui-keyboard-input-current + label[placeholder]:before {
        color: #00bafa;
    }



    .stickHeader:focus + label[placeholder]:before,
    .ui-keyboard-input-current + label[placeholder]:before,
    .stickHeader + label[placeholder]:before {
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transform: translate(0, -1.7em) scale(1, 1);
        transform: translate(0, -1.7em) scale(1, 1);
    }


    .stickHeader:focus + label:after,
    .ui-keyboard-input-current + label:after,
    .stickHeader + label:after {
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transform: translate(0, -1.7em) scale(1, 1);
        transform: translate(0, -1.7em) scale(1, 1);
    }

.ui-keyboard-input-current {
    -moz-box-shadow: inherit;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
}

.placeholder {
    text-align: center;
}

input[type="text"]:not([readonly]):focus,
input[type="number"]:not([readonly]):focus,
input[type="email"]:not([readonly]):focus,
input[type="password"]:not([readonly]):focus,
input[type="search"]:not([readonly]):focus,
select:focus, .ui-keyboard-input-current {
    border-color: transparent;
    box-shadow: 0px 0px 4px 4px #00bafa;
    background-color: #ebfaff !important;   
}

input[type="text"][readonly]:focus,
input[type="number"][readonly]:focus,
input[type="email"][readonly]:focus,
input[type="search"][readonly]:focus,
input[type="password"][readonly]:focus {
    border-color: #cccccc;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {   
    select:focus {     
        background-color: white !important;
    }
}