@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; display:flex;}
.logo {width: 40%; float:left;text-align: center;}
.logo img {max-width: 130px;  width:100%; }
.topmenu {float:right; width:30%; text-align: right;}
.topleft {float:left; width:30%; text-align: left;}
.topmenu a {color:#555; font-size:14px;}
.topmenu a:hover {color:#a50034!important;}

.row {margin-top: 5px;}
.row > div > label {margin-bottom: 5px; 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;}
}

/*Check Ticket Status*/
.ticketstatus {display:flex; flex-direction:row; padding:20px 15px; justify-content: center; border:2px solid #a50034; border-radius: 7px; align-items: center; max-width:1120px; width:100%; margin:auto; margin-bottom:20px; margin-top:10px;}
.ticketnumber {width:65px; color: #a50034; font-weight:600; float:left;}
.ticketinput {width:300px; padding-right:10px; float:left;} 
.ticket-left {width:370px;}
.ticketbutton {width:110px;}
.btn.btn-ticketstatus {background:#a50034; width:110px; border-color:#a50034; text-transform: uppercase; font-size:15px;}
.btn-primary.btn-ticketstatus:hover {color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
.btn-primary.btn-ticketstatus:active{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
.btn-primary.btn-ticketstatus:focus{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;box-shadow:none!important;}
.btn-primary.btn-ticketstatus:visited {color: #fff;background-color: #a50034!important;border-color:#a50034!important;}
.statusresult {display:flex; flex-direction:row; padding:20px 15px; justify-content: center;  border-radius: 7px; align-items: center; max-width:1120px; width:100%; margin:auto; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin-bottom:50px; }
.statustext {font-size:14px; color: #666;}
.statusresult-row {max-width:1000px; width:100%;}
.statusresulttext {font-size: 20px; font-weight:600; color: #000; line-height:27px;}
.statusnot  {font-size:14px; color: #666;text-align: right;}
.statusnot a:link {color: #a50034;}
.row-line-red {margin-top:30px; margin-bottom: 30px; border-bottom: 1px solid #a50034;}

/*do not have a ticket #*/
.noticket {display:flex; flex-direction:row; padding:20px 15px; justify-content: center; border:1px solid #555; border-radius: 7px; align-items: center; max-width:1120px; width:100%; margin:auto; margin-top:10px;}
.noticketlabel {width:120px; color: #a50034; font-weight:600;}
.noticketinput {width:300px; padding-right:10px;}
.noticketbutton {width:120px;}
.btn.btn-request {background:#a50034; width:110px; border-color:#a50034; text-transform: uppercase; font-size:15px;}
.btn-primary.btn-request:hover {color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
.btn-primary.btn-request:active{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
.btn-primary.btn-request:focus{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;box-shadow:none!important;}
.btn-primary.btn-request:visited {color: #fff;background-color: #a50034!important;border-color:#a50034!important;}
.sub-title02.margintop {color: #a50034;  font-weight:500; font-size:24px; line-height:1.1; margin-bottom:5px; margin-top:40px;}

/*login*/
.login-wrapper { width:96%; max-width:1000px; margin:auto;  }
.login-container { float:left; width:100%; max-width:1000px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; display: flex; align-items: center; justify-content:center; margin-top:50px; margin-bottom:50px;}
.login-title {color:#a50034; font-size:22px; line-height:25px; text-align:left; margin-bottom:30px;;}
.loginbg { text-align: right;}
.login-input {width:100%; max-width: 500px;}
.login-label {font-size:15px; width: 100px; color:#666; margin-bottom:0;}
a.link-forgot:link { color:#666; font-size:0.875rem; font-weight:400;}
a.link-forgot:hover {color:#cc0041!important; }
button.signin {border-radius: 5px; padding:0.45rem 2.375rem; font-size:0.9375rem; background:#a50034; border: 1px solid #a50034;}
button.signin:active{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
button.signin:focus{color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;box-shadow:none!important;}
button.signin:visited {color: #fff;background-color: #a50034!important;border-color:#a50034!important;}
.btn-primary.signin:hover {color: #fff;background-color: #cc0041!important;border-color: #cc0041!important;}
.row.forgot-id {margin-top:1rem; text-align: center; } 
.login-left {width:65%;  float:left; }
.login-left img {width:100%; max-width:100%;}
.login-right {width:35%;  float:left; padding: 30px 50px; display: flex; align-items: center; flex-direction: column; justify-content:center;}
label.rememberid {font-size:13px; color:#666;}
.login-btn {text-align: center; width:100%;}
.loginarea {display: flex; flex-direction:row; align-items: center;}

@media only screen and (max-width:412px) {
  .ticketstatus {width:94%; flex-direction: column; justify-content: center;  align-items: center; padding:15px 15px; }
  .ticketnumber {width:75px;}
  .ticket-left {width:100%; text-align: center; margin-bottom:10px;     max-width: 500px;}
  .ticketbutton {width:100%; text-align: center;}
  .ticketinput {width:100%; padding-right:0px;max-width: 220px; } 
  .btn.btn-ticketstatus {font-size:13px;}
  .statusresulttext {padding-bottom:15px;}
  .statusresult {width:94%; flex-direction: column; justify-content: center;  align-items: center; padding:15px 15px; }
  .statusresult-row {flex-direction: column; justify-content: center;  align-items: center;}
  .statusnot {text-align:center;}
  .noticket {width:94%;}
  .noticketinput {width:280px; padding-right:10px;}
  .noticketlabel .col-form-label {font-size:13px;}
  .noticketinput select.form-control {font-size:13px;}
  .noticketbutton {width:80px;}
  .btn.btn-request {width:80px; font-size:13px;}
  .login-wrapper { width:92%; margin:auto;  }
  .login-container {width:100%; display:flex; flex-direction: column; }
  .login-left  {width:100%; margin-bottom:20px;}
  .login-right {width:100%;  justify-content: center; padding: 15px 20px;}
  .login-input {padding-bottom:20px;}
}
@media screen and (max-width: 820px) and (min-width: 413px) {
  .ticketstatus {width:94%; flex-direction: column; justify-content: center;  align-items: center; padding:15px 15px; }
  .ticketnumber {width:75px;}
  .ticket-left {width:100%; text-align: center; margin-bottom:10px;     max-width: 500px;}
  .ticketbutton {width:100%; text-align: center;}
  .ticketinput {width:100%; padding-right:0px;max-width: 220px; } 
  .btn.btn-ticketstatus {font-size:13px;}
  .statusresulttext {padding-bottom:15px;}
  .statusresult {width:94%; flex-direction: column; justify-content: center;  align-items: center; padding:15px 15px; }
  .statusresult-row {flex-direction: column; justify-content: center;  align-items: center;}
  .statusnot {text-align:center;}
  .noticket {width:94%;}
  .noticketinput {width:280px; padding-right:10px;}
  .noticketlabel .col-form-label {font-size:13px;}
  .noticketinput select.form-control {font-size:13px;}
  .noticketbutton {width:80px;}
  .btn.btn-request {width:80px; font-size:13px;}
  .login-wrapper { width:92%; margin:auto;  }
  .login-container {width:100%; display:flex; flex-direction: column; }
  .login-left  {width:100%; margin-bottom:20px;}
  .login-right {width:100%;  justify-content: center; padding: 15px 20px;}
  .login-input {padding-bottom:20px;}
}