@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700|Source+Sans+Pro:400,400i,600,600i,700,700i&display=swap');
body {font-size:16px; color: #000!important; font-family: 'Source Sans Pro', sans-serif!important;}
ul > li { list-style: none; }

header.header {width:100%; background: #f6ede6; float:left; padding-bottom:20px;}
.topbar {width:100%; background:#a50034; height:7px;}
.logo-wrapper {width:100%; float:left; padding:10px;}
.logo {width: 130px; margin:auto;}
.logo img {max-width: 130px;  width:100%; }

.left-wrapper {width: 25%; border-right:1px solid #a50034; float:left; padding:0}
.title-wrapper {width:100%;  background: #a50034; border-radius: 0 0  0 60px; padding: 30px 20px 30px 50px; display:flex; flex-direction:column;}
.title {color: #fff; font-family: 'Quicksand', sans-serif; font-weight:600; font-size:30px; line-height:1;}
.step {color: #fff; font-family: 'Quicksand', sans-serif;  font-size:18px; line-height:1.1; text-transform: uppercase; font-weight:500; margin-bottom:5px;}
.right-wrapper {width:75%; float:left; padding: 50px 20px 20px 50px;}
.sub-title {color: #a50034;   font-weight:500; font-size:24px; line-height:1.1; margin-bottom:15px;}
.sub-title02 {color: #a50034;  font-weight:500; font-size:24px; line-height:1.1; margin-bottom:5px;}
.row-line {margin-top:30px; margin-bottom: 30px; border-bottom: 1px solid #ddd;}
select.form-control  { height: 35px!important;     padding: 0!important;  border: 1px solid #dedede!important; } 
p.title-info {margin-bottom:20px; font-size:18px; line-height:1.2;}
p.title-info02 {color:#000; font-size:18px; margin-bottom:3px; line-height:1.2;}
.notice-text {font-size:15px; color: #666; margin-bottom:10px; line-height:1.2;}
.button-wrapper {width:100%; text-align: right; margin-bottom:30px; }
.btn.btn-next {background:#a50034; width:130px; border-color:#a50034; text-transform: uppercase;}
.btn-primary.btn-next:hover {color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
.btn-primary.btn-next:active{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
.btn-primary.btn-next:focus{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;box-shadow:none!important;}
.btn-primary.btn-next:visited {color: #fff;background-color: #a50034!important;border-color:#a50034!important;}

footer {width:100%; float:left; border-top:1px solid #a50034; padding: 10px 15px 20px 15px; }
.copyright {font-size:14px; text-align:center; color:#666; margin-top:10px;}

/*step*/
.progress-bar-wrapper {padding:0px 20px 0px 20px; max-width:750px;width:100%; margin:auto;}
.progress-bar {display: flex;justify-content: space-between!important;list-style: none!important;padding: 30px 0 0 0!important;flex-direction:row!important;background:transparent!important;width: 100%;max-width: 1200px;margin: auto;}
.progress-bar > li {flex: 2;position: relative;padding: 20px 0 0 0;font-size: 14px;line-height: 1.5;color: #723571;font-weight: 500;white-space: nowrap;overflow: visible;min-width: 0;text-align: center;border-top: 2px solid #fff;line-height:1.1;}
.progress-bar > li:first-child,.progress-bar > li:last-child {flex: 1!important;}
.progress-bar > li:first-child {text-align: left;}
.progress-bar > li:last-child {text-align: right;}
.fa {font-weight:400;}

.progress-bar > li.case:before {  font-family: "FontAwesome"; font-size:20px; content: "\f292"; color:#999; } 
.progress-bar > li.customerinfo:before {  font-family: "FontAwesome"; font-size:20px; content: "\f2c0"; color:#999;}
.progress-bar > li.mailing:before { font-family: "FontAwesome"; font-size:20px; content: "\f041"; color:#999;}
.progress-bar > li.productinfo:before { font-family: "FontAwesome"; font-size:20px; content: "\f26c"; color:#999;}
.progress-bar > li.uploadpic:before { font-family: "FontAwesome";font-size:20px; content: "\f03e"; color:#999;}
.progress-bar > li.signature:before { font-family: "FontAwesome"; font-size:20px; content: "\f040"; color:#999;}
.progress-bar > li.summary:before {  font-family: "FontAwesome"; font-size:20px; content: "\f05d"; color:#999;}

.progress-bar > li:before {content: "";display: block;width: 46px;height: 46px;background-color: #fff;border-radius: 50%;border: 0px solid #fff;position: absolute;left: calc(50% - 19px);top: -27px;z-index: 3;transition: all .2s ease-in-out;text-align: center;line-height: 46px;vertical-align: middle;}
.progress-bar > li:first-child:before {left: 0;}
.progress-bar > li:last-child:before {right: 0;left: auto;}
.progress-bar span {transition: opacity .3s ease-in-out;font-size:15px;color:#999;}
.progress-bar > li:not(.is-active) span {opacity: 1;}
.progress-bar .is-complete:not(:first-child):after,
.progress-bar .is-active:not(:first-child):after,
.progress-bar > li.is-not-active:not(:first-child):after {content: "";display: block;width: 100%;position: absolute;top: -3px;left: -50%;z-index: 2;border-top: 2px solid #a50034;}
.progress-bar > li:last-child span {}
.progress-bar .is-complete:last-child:after,.progress-bar .is-active:last-child:after {width: 200%;left: -100%;}
.progress-bar .is-active:before {color: #fff!important;}
.progress-bar .is-complete:before {background-color: #a50034!important; color:#fff!important;}
.progress-bar span.text-completed {color:#a50034!important;}
.progress-bar span.status-active {color: #723571; font-weight:500;}
.progress-bar > li:not(.is-active) span {opacity: 1;}
.progress-bar .is-active:before,.progress-bar .is-hovered:before {background-color: #723571;border-color: #723571;animation: pulse 2s infinite;}
.progress-bar > li:hover:before,
.progress-bar .is-hovered:before {}
.progress-bar > li:hover span,
.progress-bar > li.is-hovered span { opacity: 1;}
.progress-bar:hover li:not(:hover) span {opacity: 1;}
.progress {width: 20%;float: left; position:relative;}

@media (max-width: 820px) {
    header.header {padding-bottom:15px;}
    .left-wrapper { margin-bottom:20px; padding-right: 0px!important; padding-left: 0px; width:100%;}
    .right-wrapper {width:100%; padding:20px 20px 20px 20px;}
    .mb-space {padding-top:20px;}
    .title-wrapper {border-radius: 0 0  0 35px; padding: 25px 20px 25px 30px;}
    .title { font-size:25px; }
    .sub-title {font-size:22px; }
    .sub-title02 { font-size:22px;  }
    p.title-info02 {color:#000; font-size:17px; }
    p.title-info {color:#000; font-size:17px; }
    .progress-bar > li:before {width: 30px;height: 30px;position: absolute;left: calc(50% - 15px);top: -15px;line-height: 30px;font-size: 12px!important;}
    .progress-bar span {font-size:11px;}
    .progress-bar > li {line-height:1;}
    .progress-bar-wrapper {padding: 0px 10px 0px 10px;}
    .progress-bar > li { padding: 15px 0 0 0;}
    .progress-bar {padding: 20px 0 0 0!important;}
}