//input and textare box
.inputbox {
    margin:0;
    position: relative;

    & .label-item{
        font-size: 1.6rem;
        padding: 1rem;
        color:#555;
        & span{
            &:nth-child(1){
                color:#333;
            }
        }
    }

    &.mobile{

        & label{
            width: 100%;
            display: inline-block;
            font-size:1.2rem;
            font-weight: 600;


            & .label{
                position: absolute;
                margin-top: -7rem;
                margin-left: 1.5rem;
                padding: 0 1.5rem  0 .5rem;
                background: #fff;
                color:#444;

                & i {
                    color: red;
                }
            }

            & .icon{
                text-align: left;
                position: absolute;
                font-size: 1.8rem;
                top:1.5rem;
                left:1.5rem;
                color: $color_blue_normal;

                &.right{
                    position: relative;
                    top:4.5rem;
                    margin-right:3rem;
                    float: right;
                }
            }


            & input{
                display: inline-block;
                width: 100%;
                height: 6rem;
                padding:0 1rem 0 4rem;
                font-size: 1.6rem;
                border: .2rem solid #ddd;
                outline: none;
                border-radius: .8rem;
                color:#333;
                outline: none;
                user-select: unset;

                &.icon-right{
                    padding:0 4rem 0 2rem;
                }

                &:hover {
                    border: .2rem solid #ccc;
                }

                &:focus {
                    border: .2rem solid $color_blue_normal_8;
                    color:#333;
                    caret-color: $color_blue_normal;


                    & ~ .label{
                        color:$color_blue_normal_8;
                    }
                }
            }

                }
            & textarea{
                display: inline-block;
                width: 100%;
                height:15rem;
                padding: 2rem;
                font-size: 1.6rem;
                border: 0.1rem solid #ccc;
                outline: none;
                border-radius: .5rem;
                transition: all .3s linear;
                color:#777;
                user-select: unset;
                resize: none !important;

                &:hover {
                    border: .2rem solid #ccc;
                }

                &:focus {
                    border: .2rem solid $color_blue_normal_8;
                    color:#333;
                    caret-color: $color_blue_normal;


                    & ~ .label{
                        color:$color_blue_normal_8;
                }
            }

        }



    }



    &.web{

        & label{
            display: inline-block;
            width: 100%;
            height: 2.5rem;
            font-size:1.2rem;
            color:#444;
            font-weight: 600;
            padding-left: 1rem;

            & i {
                color: red;
            }
        }

        & input{
            display: inline-block;
            width: 100%;
            height: 4.5rem;
            padding:.2rem 1rem .1rem 1rem;
            font-size: 1.6rem;
            border: .2rem solid #ddd;
            outline: none;
            border-radius: .5rem;
            color:#333;
            padding:0 0 .2rem 1rem;
            user-select: unset;


            &:hover {
                border: .2rem solid rgba(0, 0, 0, 0.4);
            }

            &:focus {
                border: .2rem solid $color_blue_normal_6;
                color:#333;
                box-shadow: 0 0 .3rem .1rem $color_blue_normal_6;
            }
        }

        & textarea{
            display: inline-block;
            width: 100%;
            height:15rem;
            padding: 2rem;
            font-size: 1.6rem;
            border: 0.1rem solid #ccc;
            outline: none;
            border-radius: .5rem;
            transition: all .3s linear;
            color:#777;
            user-select: unset;

            &:hover {
                border: 0.1rem solid rgba(0, 0, 0, 0.3);
            }

            &:focus {
                border: .1rem solid rgba(4, 0, 255, 0.8);
                color:#333;
                //box-shadow: 0 0 .3rem 0 rgba(40, 57, 145, 0.4);
            }
        }
    }

}