/*
 * File: style.css
 * Project: Step Form
 * File Created: Wednesday, 11th March 2020 2:38:33 pm
 * Author: Jason (jasonworks@qq.com)
 * -----
 * Last Modified: 2020-03-19 Thursday 12:26:44
 * Modified By: Jason
 * -----
 * Copyright - 2020, CLickr Co.Ltd
 */



@import url('../vendor/bootstrap3/css/bootstrap.min.css');
@import url('../vendor/fontawesome5/css/all.min.css');
@import url('../vendor/datepicker/datepicker.min.css');
@import url('form-radio-checkbox.css');
@import url('page-404.css');



/* 
  initialize
*/

/* body */
body{ font-family: Arial, Helvetica, 'Microsoft JhengHei', 'Microsoft Yahei', sans-serif; overflow-x: hidden; }




/* 
  components
*/

/* margins */
.mt-3{ margin-top: 30px; }
.mb-3{ margin-bottom: 30px; }
.mt-10{ margin-top: 100px; }
.mb-10{ margin-bottom: 100px; }
.mt-1{ margin-top: 15px; }
.mb-1{ margin-bottom: 15px; }

/* paddings */
.pt-3{ padding-top: 30px; }
.pb-3{ padding-bottom: 30px; }

/* buttons */
.btn-default{ color: #104b7e; }

.btn-primary{ background-color: #174b7d; border-color: #174b7d; }
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:active:hover{ background-color: #1b5893; border-color: #1b5893; }

/* color text */
.red-text{ color:#F00 !important; }

/* wrapper */
.wrapper{ overflow: hidden; }

/* step-form-header */
.step-form-header{ padding: 20px 0; background: #f3f6f8; border-bottom: 1px solid #d2d8dc; }
.step-form-header .btn-area{ float: right; display: table; height: 80px; }
.step-form-header .btn-area>div{ display: table-cell; vertical-align: middle; }

/* step-form-logo */
.step-form-logo{ float: left; display: block; max-width: 270px; max-height: 80px; }

/* step-form-footer */
.step-form-footer{ font-size: 15px; color: #323333; background: #f3f6f8; padding: 40px 0; border-top: 1px solid #e4e7ea; }

/* step-form-title */
.step-form-title{ height: 80px; display: table; border-left: 1px solid #dddcde; margin-left: 30px; padding-left: 30px; float: left; font-size: 28px; color: #104B7E; font-weight: 700; max-width: 60%; }
.step-form-title span{ display: table-cell; vertical-align: middle; }

/* step-form-title-style02 */
.step-form-title-style02{ background-color: #f3f6f8; border-left: 4px solid #104b7e; padding: 15px 20px; font-size: 20px; color: #104b7e; font-weight: 700; }

/* steps-flow */
.steps-flow .row{ margin: 0; }
.steps-flow .row>div{ padding: 0; }
.steps-flow .row>div+div .item{ border-left: 1px solid #FFF; }
.steps-flow .item{ background: #eeeeed; padding: 15px; overflow: hidden; }
.steps-flow .icon{ width: 40px; height: 40px; background: #cccccc; border-radius: 50%; text-align: center; line-height: 40px; overflow: hidden; color: #eeeeed; font-size: 24px; font-weight: 700; float: left; }
.steps-flow .icon i{ display: none; }
.steps-flow .main{ margin-left: 60px; color: #ABAAAA; font-size: 16px; line-height: 20px; }
.steps-flow .active{ background-color: #174b7d; }
.steps-flow .active .icon{ background-color: #FFF; color: #174b7d; }
.steps-flow .active .main{ color: #FFF; }
.steps-flow .done .icon i{ display: inline-block; }
.steps-flow .done .icon span{ display: none; }

/* step-form-agreement */
.step-form-agreement{ color: #545555; }
.step-form-agreement>ul{ padding-left: 34px; line-height: 20px; }
.step-form-agreement>ul>li{ margin-bottom: 20px; }

/* step-form-check */
.step-form-check{ padding-left: 24px; padding-right: 24px; color: #545555; border-top: 1px solid #eeeeee; text-align: center; }
.step-form-check>.checkbox{ margin-top: 20px; margin-bottom: 20px; }

/* step-form-btns */
.step-form-btns .btn{ padding: 10px 15px; }
.step-form-btns .btn+.btn{ margin-left: 10px; }

/* step-form-style */
.step-form-style .title{ line-height: 34px; }
.step-form-style .title span{ color: #333; font-weight: 700; }

/* step-form-style02 */
.step-form-style02{ border: 1px solid #104b7e; }
.step-form-style02 .title{ background-color: #104b7e; font-size: 20px; color: #FFF; padding: 10px 15px; font-weight: 700; }
.step-form-style02 .main{ padding-left: 15px; padding-right: 15px; padding-top: 15px; }
.step-form-style02 .required .help-block:before{ color: #F00; content: '*'; }

/* step-form-confirm */
.step-form-confirm { border: 0; }
.step-form-confirm .title{ line-height: 18px; }
.step-form-confirm .help-block{ margin-top: 0; margin-bottom: 10px; line-height: 18px; }
.step-form-confirm .confirm-info{ color: #104b7e; font-weight: 700; line-height: 18px; }
.step-form-confirm>.title{ background: none; color: #104b7e; font-size: 16px; border-bottom: 1px solid #e6e6e6; }

/* step-form-code */
.step-form-code img{ max-height: 34px; }

/* required */
.required .title>span:before{ color: #F00; content: '*'; font-weight: 700; }

/* step-form-finish */
.step-form-finish .icon{
  display: inline-block; width: 160px; height: 160px; text-align: center; line-height: 160px; font-size: 72px; color: #FFF; border-radius: 50%;
  background: rgb(121,177,61);
  background: -moz-linear-gradient(45deg,  rgba(121,177,61,1) 0%, rgba(159,205,109,1) 100%);
  background: -webkit-linear-gradient(45deg,  rgba(121,177,61,1) 0%,rgba(159,205,109,1) 100%);
  background: linear-gradient(45deg,  rgba(121,177,61,1) 0%,rgba(159,205,109,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79b13d', endColorstr='#9fcd6d',GradientType=1 );
}
.step-form-finish .icon-fail{
  background: rgb(125,125,125);
  background: -moz-linear-gradient(-45deg,  rgba(125,125,125,1) 0%, rgba(76,76,76,1) 100%);
  background: -webkit-linear-gradient(-45deg,  rgba(125,125,125,1) 0%,rgba(76,76,76,1) 100%);
  background: linear-gradient(135deg,  rgba(125,125,125,1) 0%,rgba(76,76,76,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#4c4c4c',GradientType=1 );
}
.step-form-finish h2{ font-size: 24px; color: #104b7e; font-weight: 700; }

/* step-form-search */
.step-form-search{ background: #f4f4f4; border: 1px solid #dedede; padding: 30px; }
.step-form-search .title{ line-height: 34px; }

/* file-upload-box */
.file-upload-box{ text-align: center; border-radius: 5px; min-width: 160px; padding: 10px 15px; line-height: 14px; border: 1px solid #e6e6e6; display: inline-block; position: relative; transition: all .3s; color: #333; }
.file-upload-box i{ margin-right: 5px; }
.file-upload-box input{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; cursor: pointer; }
.file-upload-box:hover{ background-color: #1b7fd5; color: #FFF; border-color: #1b7fd5; }

/* preview-box */
.preview-box{ border: 1px solid #e6e6e6; width: 160px; height: 160px; border-radius: 5px; display: none; background-position: center center; background-repeat: no-repeat; background-size: contain; margin-top: 10px; }

/* preview-text */
.preview-text{ color: #333; margin-top: 5px; }

/* search-result */
.search-result{ max-width: 60%; border: 1px solid #e6e6e6; padding:20px; color: #333; overflow: hidden; margin: 30px auto; border-radius: 5px; background-color: #FFF; box-shadow: 0 0 10px 0 rgba(0,0,0,0.125); }
.search-result h3{ font-size: 20px; color: #1b5893; font-weight: 700; margin: 20px 0 0 0; }
.search-result h2{ font-size: 30px; font-weight: 700; color: #333; margin: 30px 0; }

/* no-data */
.no-data{ border-radius: 5px; border: 1px solid #e6e6e6; padding: 20px; }
.no-data .icon{ 
  width: 60px; height: 60px; display: inline-block; line-height: 60px; border-radius: 50%; color: #666; font-size: 24px;
  background: rgb(224,224,224);
  background: -moz-linear-gradient(45deg,  rgba(224,224,224,1) 0%, rgba(209,209,209,1) 100%);
  background: -webkit-linear-gradient(45deg,  rgba(224,224,224,1) 0%,rgba(209,209,209,1) 100%);
  background: linear-gradient(45deg,  rgba(224,224,224,1) 0%,rgba(209,209,209,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#d1d1d1',GradientType=1 );
}
.no-data .content{ font-size: 16px; color: #333; margin-top: 15px; font-weight: 700; }

/* alert-style */
.alert-style span{ color: #F00; }

/* message */
.message{ position: relative; }
.message .close{ position: absolute; top: 50%; right: 15px; margin-top: -10px; }




/* 
  print
*/
@media print {

  /*
    components
  */

  /* step-form-header */
  .step-form-header{ display: none; }

  /* step-form-footer */
  .step-form-footer{ display: none; }

  /* step-form-search */
  .step-form-search{ display: none; }

  /* step-form-title-style02 */
  .step-form-title-style02{ display: none; }
  
  /* search-result */
  .search-result{ max-width: 80%; }
  .search-result .btn-area { display: none; }
  
}