﻿

.floating-input {
    position: relative;
}

    .floating-input input:focus,
    .floating-input .input:focus {
        box-shadow: none;
    }



    .floating-input input::-moz-placeholder,
    .floating-input .input::-moz-placeholder {
        color: transparent !important;
    }


    /* .floating-input input::placeholder,
    .floating-input .input::placeholder  {
        color: transparent !important;
    }*/




    .floating-input label {
        position: absolute;
        top: 9.5px;
        left: 9px;
        z-index: 10;
        color: #999 !important;
        pointer-events: none;
        font-weight: normal !important;
        padding: 0 6px !important;
        margin: 0 !important;
        white-space: nowrap;
        font-size: 14px !important;
        background-color: transparent;
        background-image: url('/siteImages/whitepixel.png');
        background-repeat: repeat-x;
        background-position-y: 9.1px;
    }

.ui.large.form .floating-input label {
    top: 14px;
}

.ui.large.form .floating-input input {
    padding-top: 14px;
    padding-bottom: 14px;
}


.floating-input.required label:after {
    content: '*';
    color: #db2828;
    margin: 0 !important;
    margin-left: 3px !important;
    margin-top: 2px !important;
}


.ui.large.form .floating-input > input:focus ~ label,
.ui.large.form .floating-input > .input:focus ~ label,
.ui.large.form .floating-input > label.active,
.floating-input > input:focus ~ label,
.floating-input > .input:focus ~ label,
.floating-input > label.active {
    top: -9.1px;
    left: 9px;
    color: #999 !important;
    font-weight: 500 !important;
    padding: 0 6px !important;
}




.floating-input > input:focus,
.floating-input > .input:focus,
.floating-input > label.active {
    border-color: #85b7d9;
}


.ui.ui.form .field.error.floating-input > input:focus ~ label,
.ui.ui.form .field.error.floating-input > .input:focus ~ label,
.ui.ui.form .field.error.floating-input > label,
.ui.ui.form .field.error.floating-input > label.active,
.ui.ui.form .field.error .floating-input > input:focus ~ label,
.ui.ui.form .field.error .floating-input > .input:focus ~ label,
.ui.ui.form .field.error .floating-input > label,
.ui.ui.form .field.error .floating-input > label.active {
    color: #999 !important;
}





.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .form-floating > label {
        transition: none;
    }
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    /*padding: 1rem 0.75rem;*/
}

    .form-floating > .form-control::-moz-placeholder,
    .form-floating > input::-moz-placeholder,
    .form-floating > input::placeholder,
    .form-floating > .form-control-plaintext::-moz-placeholder {
        color: transparent !important;
    }

    .form-floating > .form-control::placeholder,
    .form-floating > .form-control-plaintext::placeholder {
        color: transparent !important;
    }

    .form-floating > .form-control:not(:-moz-placeholder-shown),
    .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

    .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
    .form-floating > .form-control-plaintext:focus,
    .form-floating > .form-control-plaintext:not(:placeholder-shown) {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

    .form-floating > .form-control:-webkit-autofill,
    .form-floating > .form-control-plaintext:-webkit-autofill {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:-webkit-autofill ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control-plaintext ~ label {
    border-width: 1px 0;
}
