
.form{
    font-size: 10px;

    label {
        margin:0;
        padding:1.1em 1.6em 0 0;
        font-size:2em;
        line-height:1.6em;
        color:$colorFont;


    }

    fieldset {
        margin: 0;
        margin-bottom: 1.5em;
        padding:0;
        display:block;
        position:relative;
        border: none;

        small.validation {
            margin:0;
            padding:.7em .8em .3em;
            font-size:1.1em;
            line-height:1.4em;
            color:#FFF;
            border-color:#E74C3C;
            background-color:#E74C3C;
            display:block;
            position:relative;
            top:-.4em;
            opacity: 0;
            filter: alpha(opacity="0");
            height: 0;
            @include transition(all, 0.2s, ease-in-out);
            @include border-bottom-radius(.4em);
        }

        &.cmp-btns{
            padding-top: 2.3em;
        }

        &.inline {
            label, input:not([type="radio"]):not([type="checkbox"]), textarea, select{
                float: left;
            }

            label{
                padding: 0.5em 1.6em;
                padding-left: 0;
            }
        }
    }

    input:not([type="radio"]):not([type="checkbox"]), textarea, select, .select{
        margin:0;
        padding:0 0.7em;
        display:block;
        width: 100%;
        height: 2.5em;
        font-size: 2em;
        line-height: 2.5em;
        color: #666666;
        border: 0.1em solid $colorBd;
        overflow:hidden;
        position:relative;
        top:0;
        left:0;
        outline:0 none;
        z-index: 1;
        -webkit-appearance:none;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
        @include border-top-radius(0.2em);
        @include border-bottom-radius(0.2em);

        @include placeholder {
            opacity:.5;
        }

        &:focus{
            color:#333;
            border-color:#999;
            outline:none;

            @include placeholder {
                opacity:1;
            }
        }
    }

    textarea {
        padding:0 0 0 1.0em;
        resize:none;
        min-height:20.0em;
        overflow-y:auto;
    }

    input[type="search"]{ -webkit-padding-start:0; }

    .radio{
        width:100%;
        padding:.8em 0 0;

        > span{
            width: auto;
            margin:1em 2em 1em 0;
            padding:0;
            display: inline-block;
            position:relative;
            top:0;
            left:0;

            @include media($small){
                margin:0 0 2.0em;
            }

            label{
                width:100%;
                height:auto;
                margin:0;
                padding:0 0 0 2.8em;
                font-size:1.3em;
                line-height:2em;
                cursor:pointer;
                display:block;
                position:relative;
                left:0;
                top:0;
                z-index: 1;
                color: $colorFont;
            }


            input[type="radio"]{
                width:1.8em;
                height:1.8em;
                border:none;
                position:absolute;
                top:.1em;
                left:.1em;

                & + label:before {
                    margin:0;
                    content:'';
                    position:absolute;
                    left:0;
                    top:0;
                    border: 0.2em solid  lighten($colorMain, 20%);
                    background: #FFF;
                    cursor:pointer;
                    display:inline-block;
                    width:2.0em;
                    height:2.0em;
                    text-align:center;
                    font-size:0.9em;
                    line-height:1.3em;
                    @include border-top-radius(50%);
                    @include border-bottom-radius(50%);
                    @include transition(all 0.1s linear 0.1s);
                }

                &:checked + label:before{
                    background:#FFF;
                    border: 0.7em solid  lighten($colorMain, 20%);
                }
            }
        }

        small {
            top: 0;
            @include border-top-radius(.4em);
        }
    }

    .checkbox{
        width: 100%;

        > span{
            width:auto;
            margin:0;
            padding:0;
            display: block;
            position:relative;
            top:0;
            left:0;

            label{
                width:100%;
                height:auto;
                margin: 0;
                padding:0 0 0 2.3em;
                font-size:2em;
                line-height:1.7em;
                cursor:pointer;
                display:block;
                position:relative;
                left:0;
                top:0;
                z-index: 1;
                color: $colorFont;
            }

            input[type="checkbox"]{
                width: 3.1em;
                height: 3.1em;
                top: 0.2em;
                left: 0.2em;
                border: none;
                position:absolute;
                border-right: none;

                & + label:before{
                    font-family: 'icomoon';
                    margin:0;
                    content:'';
                    position:absolute;
                    left:0;
                    top:0;
                    border: 0.15em  solid $colorBd;
                    cursor:pointer;
                    display:inline-block;
                    width:1.75em;
                    height:1.75em;
                    font-size: 2rem;
                    line-height: 1.6em;
                    text-align:center;
                    color: #fff;
                    background: #fff;
                    @include border-top-radius(.18em);
                    @include border-bottom-radius(.18em);
                    @include transition(all 0.1s linear 0.1s);
                }

                &:checked + label:before{
                    content: '\f00c';
                    color: $colorMain;
                    @include transition(all 0.2s linear 0s);
                }

                &:disabled + label:before{
                    color: #fff;
                    background: $colorBd;
                    @include transition(all 0.2s linear 0s);
                }
            }
        }

        small {
            top: 0;
            @include border-top-radius(.4em);
        }
    }

    .switch{
        width: 100%;
        padding:.8em 0 0;

        > span{
            width:auto;
            margin:0 0 1.0em;
            padding:0 ;
            display: block;
            position:relative;
            top:0;
            left:0;

            label{
                width:100%;
                height:auto;
                margin: 0;
                padding:0 0 0 6.0em;
                line-height:2.4em;
                cursor:pointer;
                display:block;
                position:relative;
                left:0;
                top:0;
                z-index: 1;
                font-size: 1.7em !important;
            }

            input[type="checkbox"]{
                width:1.8em;
                height:2.5em;
                border: none;
                position:absolute;
                border-right: none;

                & + label:before,
                & + label:after{
                    margin:0;
                    content: '';
                    position: absolute;
                    display: block;
                    left:0;
                    top:0;
                    background: darken($colorMain, 20%);
                    bottom: 0;
                    width: 5.0em;
                    height: 2.5em;
                    box-shadow: inset 0 .3em .1em rgba(0,0,0,0.3);
                    border-bottom: .1em solid #fff;
                    @include border-top-radius(.4em);
                    @include border-bottom-radius(.4em);
                    @include transition(all 0.1s linear 0.1s);
                }

                & + label:after{
                    width: 2.2em;
                    height: 2.0em;
                    top: .2em;
                    bottom: .2em;
                    margin-left: .2em;
                    background-color: #f1f1f1;
                    box-shadow: inset 0 -.3em .1em rgba(0,0,0,0.2);
                    border-bottom: none;
                    @include border-top-radius(.4em);
                    @include border-bottom-radius(.4em);
                }


                &:checked + label:after{
                    margin-left: 2.6em;
                    box-shadow: inset 0 -.3em .1em rgba(0,0,0,0.4);
                }
            }

        }
    }

    .select{
        padding:0;
        position:relative;
        right:0;
        top:0;
        background:#FFF;

        &:after{
            font-family: 'icomoon';
            font-size: 0.8em;
            width: 1.9em;
            height: 2.9em;
            color: $colorMain;
            margin:0;
            padding:0;
            content:'\f078';
            text-align:center;
            right:0;
            top:0;
            background:#FFF;
            position:absolute;
            pointer-events:none;
            z-index: 1;
        }

        select{
            padding: 0 1.5em 0 0.5em;
            background-color:#FFF;
            width:100%;
            height:100%;
            line-height: 1em;
            font-size: inherit;
            font-family:sans-serif;
            border:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            appearance:none;
            cursor:pointer;
        }


        option{
            padding:1.0em;
            border-bottom:.1em
            solid #F2F2F2;
        }

        optgroup{
            padding:0 1.0em;
            color:#000;
            background-color:#FFF;
        }

        optgroup[label]{
            padding-top:1.0em;
            background-color:#FFF;
            font-style:normal;
        }

        optgroup option{
            border-bottom:.1em solid #F2F2F2;
            font-family:sans-serif;
            font-size:1.2em;
            line-height:4.0em;
        }

        optgroup option:first-child{
            margin:1.0em 0 0 0;
            border-top:.1em solid #F2F2F2;
        }
    }

    .checkbox-mini{
        @extend .checkbox;
        font-size: .8em;
        padding: 1.3em 0 0;

        > span{
            label{
                    padding: 0 0 0 1.8em;
                    line-height: 1.5em;
            }

            input[type="checkbox"]{
                width: 2.6em;
                height: 2.6em;

                & + label:before{
                    width: 1.44em;
                    height: 1.44em;
                    font-size: 1em;
                    line-height: 1.2em;
                }
            }
        }
    }

    // validation

    //input:not(:focus):invalid                                   { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;}

    // input.invalido, .select.invalido, input[type="checkbox"].invalido + label:before, input[type="radio"].invalido + label:before{
    //     color: #E74C3C;
    //     border: .2em solid #E74C3C;
    //     -webkit-box-shadow:none;
    //     -moz-box-shadow:none;
    //     box-shadow:none;
    // }
    //
    // input.invalido::-webkit-input-placeholder,
    // input.invalido:-moz-placeholder,
    // input.invalido::-moz-placeholder,
    // input.invalido:-ms-input-placeholder                        { color:#E74C3C; opacity:1; }
    //
    //
    // input.invalido + small, .select.invalido + small, .checkbox.invalido small, .radio.invalido small{
    //     opacity: 1;
    //     height: 2.0em;
    //     filter: alpha(opacity="100");
    // }



    // .loading                                                    { padding-right:4.6em; background-color:#25A35A; position:relative; cursor:default; color:#FFF; }
    // .loading:hover                                              { background-color:#25A35A; }
    // .loading:after                                              { margin:-1.0em 0 0 0; content:''; width:2.0em; height:2.0em; background:transparent url('../img/loading.png') no-repeat 0 0; position:absolute; top:50%; right:1.6em; -webkit-animation:spinner 1.0s infinite linear reverse; animation:spinner 1.0s infinite linear reverse; }
    //
    // .successful                                                 { padding-right:4.6em; background-color:#25A35A; position:relative; cursor:default; color:#FFF; }
    // .successful:hover                                           { border-color:#25A35A; background-color:#25A35A; }
    // .successful:after                                           { content:'\2714'; width:2.0em; height:2.0em; font-size:1.4em; line-height:3.0em; position:absolute; top:1.0em; right:1.6em; }
    //
    // .failure                                                    { padding-right:4.6em; background-color:#E74C3C; position:relative; cursor:default; color:#FFF; }
    // .failure:after                                              { content:'\00D7'; width:2.0em; height:2.0em; font-size:2.0em; line-height:3.0em; position:absolute; top:1.0em; right:1.6em; }
    // .failure:hover                                              { background-color:#E74C3C; border-color:#E74C3C; }
    //
    // @keyframes spinner {
    //     0%                                                      { transform:rotate(0deg); -webkit-transform:rotate(0deg); }
    //     100%                                                    { transform:rotate(-360deg); -webkit-transform:rotate(-360deg); }
    // }
    //
    // @-webkit-keyframes spinner {
    //     0%                                                      { transform:rotate(0deg); -webkit-transform:rotate(0deg); }
    //     100%                                                    { transform:rotate(-360deg); -webkit-transform:rotate(-360deg); }
    // }
}
