.cfe{

    //---input field style---
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="text"],
    textarea,
    select {
        font-size: 14px;
        color: #7A8B9A;
        padding: 5px 15px;
        height: 36px;
        width: 100%;
        min-width: 190px;
        border-radius: 6px;
        display: block;
        border: 1px solid #E5E8F3;

        &::-webkit-input-placeholder {
            color:  #7A8B9A;
        }
        &::-moz-placeholder { 
            color:  #7A8B9A;
        }
        &:-ms-input-placeholder { 
            color:  #7A8B9A;
        }
        &:-moz-placeholder { 
            color:  #7A8B9A;
        }

        &:focus {
            outline: none;
            box-shadow: none;
            border-color:#E5E8F3;
            color: #7A8B9A;
        }
        &:hover {
            color: #7A8B9A;
        }

        &[readonly] {
            cursor: not-allowed;
            background-color: #eee;
        }

    }

    textarea{
        resize: none;
        min-height: 130px;
        padding: 11px 15px;
    }

    select {
        max-width: inherit;
    }

    //----transitions---
    a,
    svg path,
    button[type="submit"],
    input[type="button"],
    input[type="submit"],
    .btn-default,
    .transition-3ms {
        transition: all 0.3s ease
    }
    .transition-5ms {
        transition: all 0.5s ease;
    }

    //-----button style----
    input[type="button"],
    input[type="submit"],
    button[type="submit"],
    .btn-default {
        display: inline-block;
        border: none;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        color: #fff;
        font-weight: 500;
        padding: 0 30px;
        min-width: 130px;
        cursor: pointer;
        text-align: center;
        letter-spacing: 0.2px;
        border-radius: 10px;
        text-transform: capitalize;
        background-color: $primary-color;

        &:hover{
            background-color: $secondary-color;
            color: #fff;
        }
    }

    //----label style----
    label,
    .label {
        font-weight: 500;
        font-size: 13px;
        line-height: 15px;
        color: #363B4E;
    }


    //------extendable classes--------
    .pos-relative {
        position: relative;
    }
    .overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    @media screen and (max-width: 782px){
        input[type="text"], 
        input[type="password"], 
        input[type="date"], 
        input[type="datetime"], 
        input[type="datetime-local"], 
        input[type="email"], 
        input[type="month"], 
        input[type="number"], 
        input[type="search"], 
        input[type="tel"], 
        input[type="time"], 
        input[type="url"], 
        input[type="week"] {
            min-height: auto;
        }
    }

    .hints {
        font-size: 13px;
        font-style: italic;
        color: #7A8B9A;
        margin-top: 4px;
        display: inline-block;
        word-break: break-all;
    }

}