html,
body {
    height: 100%;
}

body {
    display: grid;
    font-family: Avenir;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

.inp {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 280px;
}

    .inp .label {
        position: absolute;
        top: 10px;
        left: 0;
        font-size: large;
        color: #E32A97;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: bold;
        transform-origin: 0 0;
        transition: all 0.2s ease;
    }

    .inp .border {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: #07f;
        transform: scaleX(0);
        transform-origin: 0 0;
        transition: all 0.15s ease;
    }

    .inp input {
        -webkit-appearance: none;
        width: 100%;
        border: 0;
        font-family: inherit;
        padding: 20px 0;
        height: 48px;
        font-size: 20px;
        font-weight: 500;
        border-bottom: 2px solid #c8ccd4;
        background: none;
        border-radius: 0;
        color: #007BFF;
        transition: all 0.15s ease;
    }

    .inp .RadComboBox_MetroTouch {
        -webkit-appearance: none;
        width: 100%;
        border: 0;
        font-family: inherit;
        padding: 20px 0;
        height: 48px;
        font-size: 20px;
        font-weight: 500;
        border-bottom: 2px solid #c8ccd4;
        background: none;
        border-radius: 0;
        color: #007BFF;
        transition: all 0.15s ease;
    }

        .inp input:hover {
            background: rgba(34,50,84,0.03);
        }

    .inp .RadComboBox_MetroTouch:hover {
        background: rgba(34,50,84,0.03);
    }

    .inp input:not(:placeholder-shown) + span {
        color: #E32A97;
        transform: translateY(-36px) scale(0.75);
    }

    .inp .RadComboBox_MetroTouch:not(:placeholder-shown) + span {
        color: #E32A97;
        transform: translateY(-36px) scale(0.75);
    }

    .inp input:focus {
        background: none;
        outline: none;
    }

    .inp .RadComboBox_MetroTouch:focus {
        background: none;
        outline: none;
    }

    .inp input:focus + span {
        color: #E32A97;
        transform: translateY(-36px) scale(0.75);
    }

    .inp .RadComboBox_MetroTouch:focus + span {
        color: #E32A97;
        transform: translateY(-36px) scale(0.75);
    }

                .inp input:focus + span + .border {
                    transform: scaleX(1);
                }

    .inp .RadComboBox_MetroTouch:focus + span + .border {
        transform: scaleX(1);
    }