﻿/*--------------- Form Table Styling ---------------*/

.form_box   {width: 100%; margin:10px 0; padding: 0px; overflow: hidden; font-size:10pt;}

.form_box .float_left   {float:left; width:50%; padding:0 2% 0px 0px;}

.form_row       {width:100%; overflow: hidden; margin-bottom:15px; padding-left:0%;}
.form_column    {width:100%; float: left; display: table-cell; text-align: left; vertical-align:middle; padding-top:3px;}

.form_left_column   {width:40%; float: left; display: table-cell; text-align: left; vertical-align:middle; padding-top:5px;}
.form_right_column  {width:60%; float: right;  display: table-cell; text-align: left; vertical-align:middle;}

.form_box span.star {color:#a72d44;}
.err {font-size: 13px; color:#fff;}
.form_box input     {font-size: 14px; color:#666; outline:none; resize:none;}

textarea            {font: 12px Calibri, 'CalibriRegular'; box-sizing: border-box;}

.normal_input       {width:96%; padding:5px 2%;  font-size:12px; color: #666; background:#fff; border: 1px solid #dcdcdc; font-family:inherit; outline:none; resize:none; transition:all .3s ease;  -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease;}
.normal_input:hover {background:#f2f2f2; border:1px solid #ccc;}
.normal_input:focus {color:#222222; background:#ddd; border:1px solid #ccc;}

.normal_dd       {width:100%; padding:8px 0%;  font-size:12px; color: #666; background:#fff; border: 1px solid #dcdcdc; font-family:inherit; outline:none; resize:none; transition:all .3s ease;  -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease;}
.normal_dd:hover {background:#f2f2f2; border:1px solid #ccc;}
.normal_dd:focus {color:#222222; background:#ddd; border:1px solid #ccc;}

.form_box .verification_box                 {display:block; width:100%; float:left;}
.form_box .verification_box .captcha-img    {display:inline-block; width:120px; float:left; text-align:center; margin-right:10px;border:#32b258 1px solid; padding:6px;}
.form_box .verification_box .captcha-code   {display:inline-block; width:20%; float:left; margin-right:10px;}
.form_box .verification_box .captcha-code input{width:100%;}
.form_box .verification_box .captcha-text   {display:inline-block; width:auto; float:left; text-align:left;  font-size:16px; padding:10px 0px 0px 0px; color:#333}
.form_box .verification_box .captcha-text a {text-decoration:none; color:#333;} 
.form_box .verification_box .captcha-text a:hover   {text-decoration:underline;  color:#32b258;}

ul.form li.date-picker div{position:relative;}
ul.form li.date-picker input{padding-right:30px!important;background-color:transparent!important; position:relative; z-index:2}
ul.form li.date-picker div:before{content:'\f073'; font-family:FontAwesome; position:absolute; z-index:1; right:10px; top:15px; color:#d4d4d4;font-size:15pt;}


.form_box   {width: 100%; margin:10px 0 auto; padding:0px; overflow: hidden; font-size:10pt;}
ul.form     {display:block; margin:0 -8px}
ul.form li  {display:inline-block; margin:10px 8px; width:calc(50% - 18px); }
ul.form li.fullspan  {width:calc(100% - 18px); padding:0 2px;}

ul.form li label{font-size:19px; color:#999; margin:0 0 10px;display:block;}

input, textarea, select, label {font-family:inherit; margin:0px;}
input, textarea, select, label {resize:none; outline:none; transition:all .6s ease; -webkit-transition:all .6s ease; -moz-transition:all .6s ease; -o-transition:all .6s ease; -ms-transition:all .6s ease;}
input[type="text"], input[type="password"], textarea, select, label, input[type="submit"]   {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

ul.form li input[type="text"], ul.form li select{border:1px solid #d2d2d2;padding:12px; width:100%; background:transparent; color:#333; font-size:19px !important; }
ul.form li input[type="text"]:hover, ul.form li select:hover{border:1px solid #32b258; background:transparent;}
ul.form li input[type="text"]:focus, ul.form li select:focus  {border:1px solid #32b258; background:transparent;}

ul.form li textarea        {border:1px solid #d2d2d2; padding:5px 10px; width:100%; background:transparent; color:#333; margin-bottom:-4px; resize:none; font-size:19px !important; }
ul.form li textarea:hover  {border:1px solid #32b258;background:transparent;}
ul.form li textarea:focus  {border:1px solid #32b258;background:transparent;}

ul.form li .btn       {border:1px solid #fff; padding:18px 80px; width:auto; background:#32b258; color:#fff; text-decoration:none; font-size:19px !important;text-transform:capitalize;}
ul.form li .btn:hover {background:#1e8a3d; border:1px solid #32b258; color:#fff}

ul.form li .err {font-size: 13px; color:#e96032; float:left; padding:5px 10px;}


/*--------------- Form Table Styling ---------------*/


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and ( min-width: 220px) and ( max-width: 767px)
{
    .form_box .float_left   {float:left; width:98%; padding:0 2% 0px 0px;}
    .form_box .verification_box .captcha-img    {display:inline-block; width:140px; float:left;}

    .form_box   {}
    ul.form{margin:0 0;}
     ul.form li  { width:100%;}

    .form_box .verification_box .captcha-code   {width:100%;}

    ul.form li .btn{display:inline-block; text-align:center; max-width:80px; margin:10px auto; padding:12px 25px;}
}   