/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 01-Jul-2022, 17:08:10
    Author     : Jafran Mjm
*/

@import 'config';

form{
    margin-top: 2px;
    @include placeholder{
        color: #bfbfbf;
        font-size: 12px;
        font-family: $font_3;
    }
    input{        
        border-radius: 0;
        -webkit-appearance: none;
    }
    .input{
        width: 100%;
        height: 41px;
        border: 1px solid #b3b3b3;
        margin-bottom: 21px;
        outline: none;
        padding: 0 15px;
    }
    select{
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        appearance:none;
        background: url(../img/contact-arrow-down.png) no-repeat calc(100% - 15px);

        color: #bfbfbf;
        font-size: 12px;
        font-family: $font_3;
        .option-1{
            display:none;
        }
        option{
            padding: 7.5px 0;
        }
    }
    textarea.input{
        height: 170px;
        padding: 15px;
    }
    .checkbox-container{
        margin: 31px 0;
        .checkbox{
            display: inline-block;
            margin-left: 25px;
            position: relative;
            input{
                position: absolute;
                opacity: 0;
                &:checked ~ label{
                    background: url(../img/checkbox-checked.png) no-repeat left top;
                }
            }
            label{
                cursor: pointer;
                padding-left: 22px;
                background: url(../img/checkbox.png) no-repeat left top;
            }
        }
        span{
            font-size: 16px;
        }
    }
    input[type="submit"]{
        height: 40px;
        width: 122px;
        background: $clr_3;
        color: #fff;
        font-size: 16px;
        font-family: $font_3;
        border: none;
        cursor: pointer;
        &:hover{
            background: $clr_5;
        }
    }
}
.back{
    margin-top: 60px;
    
    i.readmore{
        padding-left:0; 
        padding-right: 5px; 
    } 
}

@media screen and (max-width : 850px){
    form .checkbox-container{
        span.main{
            display: block;
        }
        .checkbox{
            margin: 0;
            margin-right: 25px;
            margin-top: 10px;
        }
        .wpcf7-list-item{
            &:first-child{
                margin-left: 0;
            }
        }
    } 
}