@import "mixins.scss";
@import "globalvar.scss";
/* ============= Form area Strat ========== */ 
.formarea { position:relative; padding-top: 20px;
    /* --------------------- Form bootstrap.min css Strat --------------------- */	
	.form-group{margin-bottom: 30px;position:relative;
        &:focus{ outline: none!important;}
	}
	.select2-container {
		&.select2-container-active{
			.select2-chosen{color: #000;}
		}
		.select2-choice{			
            .select2-chosen{margin-right: 20px; color: #4B4B4B; line-height: 65px;}
            .select2-arrow{ right: 10px; top: 1px;
                b{ background-image: url(../images/select_arrow.png); background-size: 14px; opacity: 0.92;}
            }            
        }
        &.select2-dropdown-open{
            .select2-choice{background: #fff!important; border-color: #000; color: $fntColorBlack;}
        }
        @include desktop1600{ 
            .select2-choice{			
                .select2-chosen{line-height: 58px;}
            }
        }
        @include desktop1440{ 
            .select2-choice{			
                .select2-chosen{line-height: 37px;}
            }
        }
        @include desktop1400{ 
            .select2-choice{			
                .select2-chosen{line-height: 37px;}
            }
        }
        @include tab1024{ 
            .select2-choice{			
                .select2-chosen{line-height: 32px;}
            }
        }
    }
    .uploadresume{
        position: relative;
        input[readonly] { background-color: #B9DAE7!important;}
        i{color: rgba(0, 0, 0, 0.61);cursor: pointer; font-size: 22px;}
        .input-group-btn{position: absolute;right: 10px; z-index: 222;}
        label.error{top:100%;}
        .btn-file{padding-right: 2px;}
    } 
    .btn-file{position:relative;overflow:hidden; padding-top: 9px;
        input[type=file]{
            position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px; 
            text-align:right; filter:alpha(opacity=0);opacity:0;background:red;cursor:inherit;display:block;
        }
    }  
    #filemsg{ position: absolute; right: 0px; font-size: 14px;}    
    .capcha_coad_area{@include dispflex(flex,space-between,flex-start); max-width: 100%;
        .form-control{max-width: 100%; border-radius: 0px!important; height: 33px;}
        .pull-right{margin-bottom: 0px!important; border-radius: 0px; overflow: hidden; margin-top: 0px; margin-left: 20px; width: 165px; height: 33px;
            img{border-radius: 0px;}
        }
        @include desktop1600{
            // .pull-right{height:70px;
            //     img{max-height: 70px;}
            // }
        }
        @include desktop1440{
            // .pull-right{height:50px;
            //     img{max-height: 50px;}
            // }
        }
        @include tab1024{
            // .pull-right{height:45px;
            //     img{max-height: max-content;}
            // }
        }
    }
    
    .form-control, textarea, select, .select-wrapper .holder,.select2-container .select2-choice {font-family: $fontfamily; font-size:18px; font-weight: 300; color:#222;
        &::placeholder{font-size: 18px;}
        @include desktop1600{ font-size: 18px;
            &::placeholder{font-size: 18px;}
        }
        @include desktop1440{ font-size: 16px;
            &::placeholder{font-size: 16px;}
        }
        @include desktop1400{ font-size: 15px;
            &::placeholder{font-size: 15px;}
        }
    }
    input[type="radio"], input[type="checkbox"] { margin-top:2px; margin-right:8px;}
    .radio, .checkbox, .checkbox-inline label, .radio-inline label { font-weight:normal;}
    label{ font-size:1.125em; margin-bottom: 7px;
        &.error{position: absolute; left: 0px; bottom: -25px; font-size: 13px; color: #ff0000;}
    }
    .redcor{ color:#ff0000;}
    
    .form-control,.select2-choice {
        display:block;
        width:100%;
        height:33px;
        padding:11px 0px;
        line-height:24px!important;
        background:#fff;
        background-image:none;
        border: none!important;
        border-bottom:#DFDFDF solid 2px!important;	
        border-radius: 0px!important;
        box-shadow:none;
        outline: none;
        &:focus,&:hover{
            outline: none!important;
            border-color: #000!important;
            background-color: #fff!important;
            outline:0;
            -webkit-box-shadow:none;
            box-shadow:none;
            color: #000;
            &::placeholder{color:$fntColorBlack!important;}
        } 
        &::placeholder{color: #B5B5B5;}  
        @include desktop1600{ height:33px;}
        @include desktop1440{ height:33px;}
        @include tab1024{ height:33px;}        
    }
    textarea { resize:none; height:160px; padding-top: 15px; line-height:18px!important;
        &.form-control{height: 160px; padding-top: 0px;}
        @include desktop1600{ height:150px;
            &.form-control{height: 150px;}
        }
        @include desktop1440{ height:140px;
            &.form-control{height: 140px;}
        }
        @include tab1024{ height:120px;
            &.form-control{height: 120px;}
        }
    }
    .help-block { padding:0px;}
    .form-horizontal .control-label { text-align:left;}

    .btnarea{ margin-top:14px; display:block; text-align: left;
        .btn{padding-left: 45px; padding-right: 45px;}
        &.paddtop40{padding-top: 23px;}
        @include phone { text-align: center;
            &.paddtop40{padding-top: 10px;}
        }
    }
    /* --------------------- placeholder css Strat --------------------- */
    .ie8, .ie9{
        label.placeholder{ padding-top:0px!important;}
        .textareabox label.placeholder{padding-top:6px!important;}
    } 
    /* ------ Placeholder css End ------ */
    /* --------------------- Form bootstrap.min css End --------------------- */
    /* --------------------- Browse input css Strat --------------------- */
    .btn-file { position: relative; overflow: hidden; padding-top: 11px; font-weight: 300;
        input[type=file] {
            position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; background: red; cursor: inherit; display: block; background: #F5F5F5;
        }
        input[readonly] { background-color: #fff !important; cursor: text !important;}
    }
    /* ---- custom-file-uploader Start ---- */
    .custom-file-uploader {
        position: relative; min-height: 53px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;
    
        input[type='file'] {
          display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; cursor: pointer;
        }
        img{position: absolute; right: 36px;}
        @include phone480{
            img{max-height: 25px;}
        }
        input{padding-left: 0px!important;}
      }
      .file_upload_area{
          .input-group{width: auto; position: relative; z-index: 1; display: inline-block;
            input{width: 100%; border: #C9C9C9 solid 1px!important; padding-left: 30px;}
        }
          .input-group-btn{position: absolute; right: 0px; top: 0px; width: 100%;}
      }
      /* ---- custom-file-uploader End ---- */
    /* --------------------- Browse input css end --------------------- */
    /* --------------------- checkbox and redio button css Strat --------------------- */
    .checkbox_area { @include dispflex(flex, flex-start, center);
        ul { margin-right: 50px;
            &:last-child{margin-right: 0px;}
            @include dispflex(flex, flex-start, center);    
            li {
                @include dispflex(flex, flex-start, center); position: relative; cursor: pointer; margin-right: 15px; height: 40px;    
                &:last-child {
                    padding-bottom: 0px; margin-right: 0px;
                }    
                .redio_box {
                    @include dispflex(flex, flex-start, center); position: relative; z-index: 2; cursor: pointer; padding-left: 30px;
                    label { margin: 0px; padding: 0px;}
                    input[type=checkbox], input[type=radio]{
                        &:not(old){
                            position: absolute; z-index: 2; left: 0px; top: 0px; width: 24px; height: 24px; margin: 0; padding: 0; opacity: 0; cursor: pointer;
                            +span{position: absolute; z-index: 1; left: 0px; top: 0px;  background-size: 24px; width: 24px; height: 24px;cursor: pointer;}
                        }                        
                    }
                    input[type=checkbox]{
                        &:not(old){
                            +span{background: url('http://template.weblivelink.com/uiproject/design_images/checkbox.png') no-repeat 0 0; background-size: 24px;}
                        }
                        &:checked{
                            +span{background-image: url(http://template.weblivelink.com/uiproject/design_images/checkbox_check.png);}
                        }
                    }
                    input[type=radio]{
                        &:not(old){
                            +span{background: url('http://template.weblivelink.com/uiproject/design_images/radio_button.png') no-repeat 0 0;background-size: 24px; }
                        }
                        &:checked{
                            +span{background-image: url(http://template.weblivelink.com/uiproject/design_images/radio_button_select.png);}
                        }
                    }
                }
            }
        }
    }
    /* --------------------- checkbox and redio button css End --------------------- */  
    @include desktop1600{
        padding-top: 8px;
    }
    @include desktop1366{
        .form-group{margin-bottom: 24px;}
    }
    @include tab1024{
        .capcha_coad_area .pull-right{
            margin-left: 14px; width: 53px; height: auto;
            img{max-width: 40px;}
        }
    }
    @include tab{
        .checkbox_area{
            ul{margin-right: 20px;}
        }
    }
    @include phone480{
        .checkbox_area{ flex-direction: column; align-items: flex-start;
            ul{margin: 0px 0px 10px 0px;
                &:last-child{margin-bottom: 0px;}
            }
        }
    }       
}
  .info2, .success, .warning2, .failure, .validation2{border:1px solid;margin:10px 0px;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center; text-align: left;}
  .info2{color:#00529B;background-color:#BDE5F8;background-image: url(http://template.weblivelink.com/uiproject/design_images/info.png) !important;}
  .success{color:#4F8A10;background-color:#DFF2BF; background-image: url(http://template.weblivelink.com/uiproject/design_images/success.png) !important;}
  .warning2{color:#9F6000;background-color:#FEEFB3;  background-image: url(http://template.weblivelink.com/uiproject/design_images/exclamation.png) !important;}
  .failure{color:#D8000C;background-color:#FFBABA;  background-image: url(http://template.weblivelink.com/uiproject/design_images/error.png) !important;}
/* ============= Form area End ========== */