/*LV_Vaild*/
  .form-component .LV_invalid_field{
      outline:1px solid#F04124;
  }
  .form-component .LV_invalid {
    color: #F04124;
    font-size: 16px;
    position: absolute;
    
  }
  button, input, optgroup, select, textarea {
    font-family: Arial,"Gill Sans MT","微軟正黑體",Helmet,Freesans,verdana,sans-serif;
  }
/*Sharp、Black Text--default
  Sharp、White Text--sharp-white
  Linear、Black Text--linear-black
  Linear、White Text--linear-white  */
  .form-component{
    position: relative;
    z-index: 3;
    margin-top:10px;
    font-family: Arial;
  }
  .form-component.sharp-white {
    color: #ffffff;
  }
  /*linear-black linear-white */
  .form-component.linear-black .form-design-field input[type="text"]:not(.form-control),
  .form-component.linear-black .form-design-field select,
  .form-component.linear-black  textarea,
  .form-component.linear-white .form-design-field input[type="text"]:not(.form-control),
  .form-component.linear-white .form-design-field select,
  .form-component.linear-white  textarea{
    background-color: transparent;
    border: unset;
    border-bottom: 1px solid #dddddd;
    box-shadow: none;
    outline: none;
  }
  .form-component.linear-black .form-design-field input[type="text"]:not(.form-control),
  .form-component.linear-black .form-design-field select,
  .form-component.linear-black  textarea {
    border-bottom: 1px solid #000000;
  }
  .form-component.linear-black .form-design-field input[type="text"]:not(.form-control):focus , 
  .form-component.linear-black .form-design-field select:focus,
  .form-component.linear-black .form-design-field textarea:focus,
  .form-component.linear-white .form-design-field input[type="text"]:not(.form-control):focus , 
  .form-component.linear-white .form-design-field select:focus,
  .form-component.linear-white .form-design-field textarea:focus{
    border-bottom: 1px solid #009FEB;
    box-shadow: none;
  }
  
  .form-component.linear-white {
    color: #ffffff;
  }
  .form-component.linear-white .form-design-field input[type="text"]:not(.form-control),
  .form-component.linear-white .form-design-field select,
  .form-component.linear-white textarea,
  .form-component.linear-white textarea:focus{
    color: #ffffff;
    
  }
  .form-component.linear-black .form-design-field input[type="text"].LV_invalid_field,
  .form-component.linear-black textarea.LV_invalid_field,
  .form-component.linear-white .form-design-field input[type="text"].LV_invalid_field,
  .form-component.linear-white textarea.LV_invalid_field{
    outline:none;
    border-bottom: 1px solid#F04124;
  }
  .form-component .container{
    padding:0;
    /* background-color: #ffffff; */
  }
  /* form color */
  .form-component .form-title.transparent_black {
    background-color: transparent;
  }
  .form-component .form-title.transparent_white {
    background-color: transparent;
  }
  .form-component .form-title.transparent_white h1 {
    color: #fff;
  }
  .form-component .form-title.bg_light_gray {
    background-color: #F2F2F2;
  }
  .form-component .form-title.bg_light_gray h1 {
    color: #000000;
  }
  .form-component .form-title.bg_gray{
    background-color: #757575;
  }
  .form-component .form-title.bg_gray h1{
    color:#ffffff;
  }
  .form-component .form-title.bg_black h1{
    color:#ffffff;
  }

  .form-component label {
    font-weight: normal;
  }
  .form-component .form-design-field-checkbox label{
    font-weight: bold;
  }
  .form-component .form-title{
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    padding: 35px;
  }

  .form-component .form-title h1{
    padding-bottom: 0px;
    font-size: 25px;
    text-align: center;
    margin: 0;
    font-family: "Gill Sans MT";
  }

  .form-component .form-wrapper{
    padding: 25px 10px 10px 10px;
    font-size: 18px;
  }
  .form-component .form-wrapper .form-design-field-checkbox,
  .form-component .form-wrapper .form-desc,
  .form-component .form-wrapper .form-marketing,
  .form-component .form-wrapper .form-subscription,
  .form-component .form-wrapper .form-desc{
    font-size: 16px ;
  }

  .form-component .form-wrapper label span{
    color: #f47c20 !important; 
    font-weight: bold;
    position: absolute;
  }

  .form-component .form-design-field{
    padding: 5px 20px 20px 20px;
    display: block; 
    float: left; 
    text-align: left;
    width: 50%;
  }

  .form-component .form-design-field-checkbox{
    padding: 5px 30px 5px 30px;    
    width: 100%;
    text-align: left;
    clear: both;
  }

  .form-component .form-design-field-checkbox label{
    margin-left: 4px; 
    display: inline;
  }
  
  .form-component .form-desc{
    padding: 5px 25px;
    width: 100%;
    text-align: left;
    clear: both;
  }

  .form-component .form-submit{
    text-align: center;
    padding: 40px;
    width: 100%;
    clear: both;
  }

  .form-component .form-submit .green{
    background-color: #6DA9AA;

  }
  .form-component .form-submit .blue{
    background-color: rgb(67, 133, 245);

  }
  .form-component .form-submit .b2c-purple{
    background-color: #492582;
  }
  .form-component .form-submit .b2b-blue{
    background-color: #0050C7;
    border-radius: 30px;
  }
  .form-component .form-submit .zowie-pink{
    background-color: #CC0040;
  }
  .form-component .form-submit .mobiuz-orange{
    background-color: #FF6C2F;
  }
  .form-component .form-submit .gold{
    background-color: #C09D5B;
  }
  .form-component .submit-button{
    border: #ffffff;
    color: #ffffff; 
  }
  .form-component .form-submit .submit-button.full{
      width: 80%;
  }
  
  .form-component .form-design-field input[type="text"], .form-component .form-design-field select, .form-component textarea{ display: block; width: 100%; height: 40px; padding: 6px 12px; font-size: 16px; line-height: 1.42857; color: #333333; background-color: #fff; background-image: none; border: 1px solid #dddddd; /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); */-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

  .form-component .form-design-field input:focus , .form-component .form-design-field select:focus ,.form-component .form-design-field textarea:focus{ border-color: #009FEB; outline: 0; box-shadow: 0px 0px 10px 0px rgba(0, 159, 235, 0.25);
 }

  .form-component .form-design-field input .checkbox:focus{ border-color: #ffffff; outline: 0; box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px rgba(0, 0, 0, 0); }

  .form-component .form-design-field input::-moz-placeholder , .form-component .form-design-field select::-moz-placeholder, .form-component textarea{ color: #999; opacity: 1; }

  .form-component .form-design-field input:-ms-input-placeholder, .form-component .form-design-field select:-ms-input-placeholder, .form-component textarea{ color: #999; }

  .form-component .form-design-field input::-ms-expand, .form-component .form-design-field select::-ms-expand, .form-component textarea{ border: 0; background-color: transparent; }

  .form-component .form-design-field input[disabled], .form-component .form-design-field input[readonly], fieldset[disabled] .form-component .form-design-field input, .form-component .form-design-field select[disabled], .form-component .form-design-field select[readonly], fieldset[disabled] .form-component .form-design-field select{ background-color: #eeeeee; opacity: 1; }

  .form-component .form-design-field input[disabled], fieldset[disabled] .form-component .form-design-field input{ cursor: not-allowed; }

  /* bootstrap select */ 
  .form-component .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
    width: 100%;
  }
  .form-component .bootstrap-select .btn,
  .form-component .bootstrap-select .dropdown-menu  {
    font-size: 16px;
    min-width:100%!important;
  }
  .form-component .dropdown-menu>.active>a ,.dropdown-menu>li>a:hover {
    background-color: #9E9E9E;
    color:#ffffff!important; 
  }
  .form-component .bootstrap-select>.dropdown-toggle {
    border-radius: 0;
    height: 40px;
    padding: 6px 12px;
    border-color: #DDDDDD;

  }
  .form-component .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    line-height: 26px;
  }
  .form-component .bootstrap-select>.dropdown-toggle.bs-placeholder,.form-component .bootstrap-select>.dropdown-toggle.bs-placeholder:active,.form-component .bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.form-component .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    background-color: #ffffff;
    border-color: #dddddd;
    box-shadow: unset; 
    color: #333333;

  }
  .form-component .bootstrap-select .dropdown-toggle:focus,.form-component .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline-color: transparent!important;
    border-color: #dddddd;
    background-color: #ffffff;
  }
  .form-component .bootstrap-select .btn-default:active, .form-component .bootstrap-select .btn-default.active,.form-component .bootstrap-select.open>.btn-default.dropdown-toggle,.form-component .bootstrap-select .open>.btn-default.dropdown-toggle:focus, .form-component .bootstrap-select .btn-default:hover {
    border-color: #dddddd;
    background-color: #ffffff;
  }
  .form-component .bootstrap-select .dropdown-menu li a {
    padding: 10px 30px 10px 15px;
  }

  @media screen and (max-width:800px){
    .form-component .form-design-field{
      width: 100%;
    }    
    .form-component .submit-button{
      height: 40px; 
      width: 50%;
      padding: 5px 40px;
      line-height: unset;
      
    }
  }

  @media screen and (max-width:600px) {
    .form-component .submit-button {
      width: auto;
    }
    .form-component .LV_invalid {
      color: #F04124;
      font-size: 14px;
    }
    .form-component .form-wrapper {
      font-size: 16px;
    }
    .form-component .form-wrapper .form-design-field-checkbox,
    .form-component .form-wrapper .form-desc,
    .form-component .form-wrapper .form-marketing,
    .form-component .form-wrapper .form-subscription,
    .form-component .form-wrapper .form-desc{
      font-size: 14px ;
    }
    .form-component .form-design-field input[type="text"], .form-component .form-design-field select, .form-component textarea{
      font-size: 14px;
    }
    .form-component .bootstrap-select .btn,
    .form-component .bootstrap-select .dropdown-menu  {
      font-size: 14px;
    }
  }