﻿.input-form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-input-2 {
    font-size: 15px;
    padding: 18px 10px 13px 15px;
    display: block;
    width: 100%;
    border: none;
    border-radius: .5em;
    height: 60px;
    border: 1px solid #ccc;
}
.form-input-3 {
    border: 1px solid #ccc
}
.form-control-sm2 {
    font-size: 15px;
    padding: 13px 10px 13px 15px;
    display: block;
    width: 100%;
    border: none;
    border-radius: .5em;
    border: 1px solid #ccc;
}

    /* Add an empty placeholder to trigger :not(:placeholder-shown) */
    .form-input-2:not(:placeholder-shown),
    .form-control-sm2:not(:placeholder-shown),
    .form-input-3:not(:placeholder-shown),
    .form-input-4:not(:placeholder-shown) {
        /* This style is not strictly necessary but can be used for visual feedback */
        /* For example, to change border color when filled */
        border-color: #ccc; /* Example: a slightly darker border when filled */
    }

/* LABEL ======================================= */
.form-input-label {
    color: #999;
    font-size: 15px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px !important;
    top: 10px;  
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

/* active state */
/* When the input is focused OR has content (not(:placeholder-shown)) */
.form-input-2:focus ~ .form-input-label,
.form-input-2:not(:placeholder-shown) ~ .form-input-label,
.form-control-sm2:focus ~ .form-input-label,
.form-control-sm2:not(:placeholder-shown) ~ .form-input-label,
.form-input-3:focus ~ .form-input-label,
.form-input-3:not(:placeholder-shown) ~ .form-input-label,
.form-input-4:focus ~ .form-input-label,
.form-input-4:not(:placeholder-shown) ~ .form-input-label {
    top: 0px;
 
   // background-color: #fff!important;
   // padding: 0 6px;
    font-size: 11px;
    color: #555; /* Optionally change label color when active */
}

/* If you want to use the 'filled' class with JavaScript for other purposes: */
/* .form-input-2.filled ~ .form-input-label {
    top: 2px;
    font-size: 14px;
    color: #555;
} */
.seventy{
    float: left;
    width: 70%;
}.thirty{
    float: left;
    width: 25%;
}
.fifty {
    float: left;
    width: 45%;
}
.btn-round{
    border-radius: .5em;
    padding-top: 17px!important;
    padding-bottom: 20px!important;
    width: 100%;
}
.select-lg {
    font-size: 13px;
    padding: 18px 10px 18px 15px;
    display: block;
    width: 100%;
    border: none;
    border-radius: .5em;
    outline: none!important;
    border: 1px solid #888!important;
    background-color: #fafafa;
}