/* Lead Form CSS*/
#header_img{
    margin-bottom:20px;font-size:24px;font-weight:bold;line-height:36px;padding:7px 0;color:#00B67A;background:#fff;;
}

#header_img .fa-arrow-down{
    top: 40px;font-size: 50px;left: 40px;position: absolute;z-index:1;height:50px;
}
#header_img span{display:block;margin-left:15px;padding:20px 0;font-size:32px;line-height:20px;position:relative;z-index:2}

#header_img .popover{
    left: 300px;
    top: 82%;
    width: 660px;
    color:#777
}
#header_img .popover.bottom .arrow{left:96.2%}
#header_img .popover-inner{line-height:32px}
.sample-pack{width:470px;margin:40px;float:right;}
#smp.popover{width: 420px;}

.lead_form.step1 {width:300px; float:left;}
.lead_form.step2 {width:940px;}
.lead_form_about {width:400px;float:right;border:1px solid #ddd;border-radius:6px;margin-bottom:30px;}
.lead_form_about iframe{border-radius:2px}
.entry:focus{background-color:#fff7c0;}

.lead_form_sample{margin-top:13px;padding:10px;width:500px;float:right;text-align: center;border:1px solid #ccc;border-radius:2px;font-size:14px;color:#555;}
.lead_form_sample b{display:block;margin:10px;font-size:20px;color:#a32035;}
.lead_form_sample img{max-width:100%;}
.lead_form_sample small{display:block;font-size:12px;}

.field{position:relative;margin:0 0 10px 0;padding:5px 40px 5px 0;font-weight:bold;display:block;clear:both;}
.field .double {float:left; width:48%;}
form .text {float:left; clear:both;}
input.radio_input{background-color:#eef4f7; background-image:none; border:0px; margin: 10px 0 0 0;}
.radio_holder {font-weight:normal;}
.field .fa{display: none;}
.field.success .fa-check {display:unset;position:absolute;right:0;bottom:12px;padding-left: 10px;font-size: 26px;}
.field .red-box {border: 1px solid #A00;}

form .req{float:none;color:red;font-weight:bold;margin:0;}

.choice_holder {border: 1px solid #E4EAED; clear:both;float:left; background-color:#f4f8fe; width:880px; padding:12px 12px 20px; margin:0 0 10px 0;border-radius:2px}
.address_block {border: 1px solid #E4EAED; clear:both;float:left; background-color:#f4f8fe; width:880px; padding:12px; margin:0 0 20px;border-radius:2px}
.address_block .field{margin-bottom:0;padding-top:0}
 #show_uploader {border: 1px solid #E4EAED; clear:both;float:left; background-color:#f4f8fe; width:880px; padding:12px; margin:10px 0 20px 0;border-radius:2px}
.form_choice {float:left; width:112px; height:100px; margin: 10px 0 20px; font-size:11px;cursor: pointer;}
.form_choice selector {font-size:11px;}
.form_choice label{cursor: pointer;white-space:nowrap;font-size:13px;display:block;text-overflow:ellipsis;overflow:hidden;}
.form_choice div {clear:both; text-align:center}
.form_choice img {margin-bottom:5px;display: block; margin-left: auto; margin-right: auto;width:55px}
.form_choice .radio_input{margin-right:0}
.form_block {clear:both; float:left; margin-top:15px}
.form_block input{margin-right:25px;}

#process_status{position:relative;left:-5px}

/* Contact Form CSS*/
.contact-form {padding:25px 20px 60px;}
#contact_form_div1 {width: 260px; float: left;}
#contact_form_div2 {width: 350px; float: left; padding-top: 5px;}
#contact_form_div3 {width: 320px; float: right; padding-top: 20px;}
#contact_form_div2 .btn{display:inline-block;width:auto}
#contact_form_div2 textarea{width: 284px; height: 222px; padding: 15px; margin-bottom: 15px; font-size: 12px; line-height: 20px;}
@media (min-width:1221px) and (min-height:800px) {
    #contact_form_div1{width:300px;}
    #contact_form_div2{width:450px;}
    #contact_form_div2 textarea{width:450px;display:block;}
}
@media (min-width:600px) and (max-width:1023px) {
    .contact-form-wrapper{width:300px;float:left;}
    #contact_form_div2{width:300px;}
    #contact_form_div2 textarea{width:260px;}
    #contact_form_div3{width:250px;}
}
@media (max-width:600px) {
    #contact_form_div3{float:left;}
    .field {padding:5px;}
}


/* file UPLOAD form css*/
#demo-status .progress{margin-right:0.5em;}
#demo-status .progress-text{font-size:0.9em;font-weight:bold;}
#demo-list{list-style:none;margin:15px 0 0 0;padding:0;}
#demo-list li.file .file-name{font-size:1.2em;display:block;line-height:20px;font-weight:bold;}
#demo-list li.file .file-size{font-size:0.9em;line-height:18px;float:right;margin-top:2px;margin-right:6px;}
#demo-list li.file .file-info{display:block;font-size:0.9em;line-height:20px;}
.file-name small {
    font-size: 12px;
    font-weight: normal;
    padding-left: 20px;
}

/* Calendar*/
#basis {display:inline;position:relative;}
#calender {position:absolute; bottom:22px; left:0; width:180px; background-color:#fff; border:2px solid #ccc; padding:10px; z-index:10; border-radius:2px }
#calender .control{ position:absolute; top:0px; left:15px; width:186px; text-decoration:none; height:auto; text-align:right; cursor:pointer;}
#calender .control img{background: url('images/close.png') no-repeat bottom left;height:16px;width:16px;margin-right:3px}
#calender .control img:hover{background: url('images/close.png') no-repeat top left;}

#control { text-align:center; margin:0 0 5px 0; }
#control select { font-family: arial, helvetica, sans-serif; font-size:11px; margin: 0 5px 0 0; vertical-align:middle;width:auto;height:25px}
#calender .controlPlus { border: 1px solid #fff;padding:2px 5px 5px; text-decoration:none; color:#555; font-weight: bold; cursor: pointer; margin-right:3px}
#calender table { empty-cells: show; width:100%; font-size:11px; table-layout:fixed;}
#calender .weekdays td{text-align:right;padding:1px 5px 1px 1px;color:#555;}
#calender .week td {text-align:right;cursor:pointer;border:1px solid #fff;padding:1px 4px 1px 0;font-weight:normal}
#calender .week .today { background-color:#f2f6fb;border-color:#dbe8f7;}
#calender .week .holiday {font-weight: bold;}
#calender .week .hoverEle,#calender .controlPlus:hover {background-color: #f2f6fb;border: 1px solid #dbe8f7;color:#555;}


/*Order Buidler*/
#panel{padding: 0px; width:980px; float:left; clear:both;}
.step_box {width:980px; height:100px; float:left; text-align:center;}
.step, .future_step {display: inline; line-height: 20px; margin-top:30px; width:222px; text-align:center; font-weight:bold;float:left; }
.step a {margin:30px 20px 0 20px;}

.timeline_left {width:52%; float:right; border-bottom:2px solid #9e9e9e; text-align:left;}
.timeline {width:100%; float:right; border-bottom:2px solid #9e9e9e; text-align:center;}
.timeline_right {width:52%; float:left; border-bottom:2px solid #9e9e9e; text-align:right;}

.circle_img {position:relative; top:11px; left:0px;z-index:9;background:#fff}
.info_img {position:relative; left:3px; top:1px; cursor:pointer;}
.quote_img {position:relative; left:-6px; top:4px; padding-left:15px;}

.title {font-size:12px; font-weight:bold;}
.left_panel {min-height:500px; height:auto !important; height:500px; background-color:#fff; width:480px; float:left; padding:10px 10px 20px 10px;}
.left_panel td {line-height: 18px; padding: 4px;}
.left_panel td.line_name {
    padding-top: 0;
    padding-bottom: 0;
}

.left_panel .fa-arrow-circle-right{visibility:hidden}
.left_panel .current .fa-arrow-circle-right,
.left_panel .complete .fa-arrow-circle-right{visibility:visible}

.left_panel .line_name {padding-left:0;}

.right_panel {min-height:500px; border-left:2px #dbe8f7 solid; height:auto !important; height:500px; background-color:#f2f6fb; width:440px; float:left;
padding:0 15px 20px 15px;border-radius:0 0 2px 0}
.right_panel td {line-height:30px; vertical-align:top;}


.right_cell {text-align:right;}
.item_row td {border-top: 1px solid #dbe8f7; line-height:30px;vertical-align: middle;}
.item_row td img.thumb {height: 30px; margin: 5px 5px 5px 0; vertical-align: middle;}
.sub_row td {line-height:30px;}
.sub_row .indent {padding-left:15px; background: url(../components/order/includes/images/item_arrow.png) no-repeat 0px 1px;}
.total {font-weight:bold; text-align:right;}
.total span {}

.helper_text {font-size:10px; padding:4px 6px 3px 5px; margin-left:2px}
.helper_text .fa-eye{color:#06c;font-size:14px}
.helper_text:hover {text-decoration:none}

.model_overlay {position:absolute; width:247px; background-color:#fff; top:-6px; border: 1px solid #ccc; padding:10px; z-index:10;border-radius:0 2px 2px 2px}
.model_overlay img {padding:3px 2px 3px 2px;opacity:0.85;width:55px}
.model_overlay img:hover {padding:1px 2px 5px 2px; cursor:pointer; opacity:1;}

.cellCurrent{background-color:#b3e842;}
.rowColTitle{font-weight:bold; }
.rowColTitleCurrent{background-color:#edf9d4; font-weight:bold;}
.cellBetween {background-color:#f6fde7;}

.tip {background-color:#fff; text-align:center;}
.tip-title {background-color:#f6fde7; padding: 0 6px 0 6px;}

.tip-text {border: 2px solid #f6fde7;border-radius:2px;padding:0 10px;text-align:left;display:block;max-width:400px}
.tip-text p{min-width:200px}
#orderForm .field-red-border {border-color:red;}

/*dropdown selector */
a.fake_drop {padding: 0px 3px 0 3px; width:160px; display:block; text-decoration:none; border: 1px solid #ccc; background: #fff url(images/dropdown.png) no-repeat right top; cursor:pointer;}
a.fake_option {padding: 1px 3px 1px 3px; display:block; text-decoration:none;  position:relative; left:1px; background-color:#fff; border-right: 1px solid #ccc;}
a.fake_option_hover{padding: 1px 3px 1px 3px; display:block; text-decoration:none;  position:relative; left:1px;background: #efefef url(images/indent_green.png) no-repeat right -18px; cursor:pointer;}
.fake_left {width:170px; float:left; border: 1px solid #ccc;position:absolute;z-index:9}
.fake_right {padding:7px; width:250px; float:left; background-color:#f6fde7; border:1px solid #b3e842;position:absolute;}
.fake_right span {font-weight:bold;}
.fake_holder {width:500px; position:relative; margin-top:2px;}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  padding: 5px;
}
.popover.bottom .arrow {
  top: -5px;
  left: 50%;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #E2E2E2;
}
.popover .arrow {
  position: absolute;
  width: 0;
  height: 0;
}
.popover-inner {
  overflow: hidden;
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  padding:8px;
}
.popover-content {
  padding:0 8px 8px;
  background-color: #fff;
  border-radius: 0 0 2px 2px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}

@media (max-width:1023px) {
    #header_img span{font-size:20px;}
    .lead_form.step1{width:260px;}
    .lead_form.step2{width:100%;}
    .lead_form_about{width:270px;}
    .choice_holder{width:568px;padding-right:0;padding-left:0;}
    .address_block, #show_uploader{width:544px;}
    .radio_holder {width:100%;}
    .tp-iframe-widget .trustpilot-desc{display:none;}
    #panel{max-width:600px}
    .step_box,.left_panel,.right_panel {width:600px;}
    .step_box{height:70px}
    .left_panel{min-height:100px}
    .step, .future_step {width:111px;margin-top:10px}
    .step a {margin:15px 10px 0 10px;}
    .content_main{width:100%;padding:10px}
    .sample-pack{width:470px;margin:40px;float:right;}
    .sample-pack-img{width:350px;height:139px;}
}
@media (max-width:800px) {}
@media (max-width:600px) {
  #panel {max-width:450px}
  .step_box,.left_panel,.right_panel {width:450px;}
  .step_box{height:70px}
  .left_panel{min-height:100px}
  .step, .future_step {width:111px;margin-top:10px}
  .step a {margin:15px 10px 0 10px;}
  #loading{display:none!important}
  .show_uploader{width:360px!important}
  .content_main{width:100%;padding:10px 0}
  .lead_form_about{display:none;}
}

/** Full screen width separator **/
.step_box_separator {
    border-bottom: 2px #dbe8f7 solid;
    clear: both;
}
@media (min-width: 1024px) {
    .step_box_separator {
        width: 20000px;
        margin-left: -10000px;
    }
}

/** Icon **/
.right_panel .info_icon {
    color: #999;
}

.right_panel .info_icon:hover {
    color: #666;
    cursor: pointer;
}