.mandatory-symbol {color: #f00;}

#servicePortalView .error {
    margin-left: 0;
    margin-bottom: 10px;
}



.flex-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}



[id="servicePortal"] a {
    color: #2f9def;
}
[id=serviceContainer] * {
    box-sizing: border-box;
}
[id=serviceContainer] {
    padding-bottom: 48px;
}
.step-loading {
    text-align: center;
    margin: 80px auto;
}
.icon-spinner:before {
    font-size: 48px;
    color: #1CB8D1;
}
.step-loading p {
    padding-top: 8px;
    font-family: "Roboto Slab", serif;
}
[id=serviceHero] {
    background: url(/images/modules/blue-rect.jpg) no-repeat 50% 50% / cover;
    text-align: center;
}
[id=serviceHero] h1,
[id=serviceHero] p{
    margin: .1em 0;
}
.hero-content {
    padding: 32px 40px;
    margin: 20px auto;
    background: #fff;
    width: auto;
    display: inline-block;
    color: #000;
    text-align: center;
    max-width: 90vw;
    min-width: 60%;
}
.tablet .hero-content {
    min-width: 75%;
}

#breadcrumbs {
    margin: 0 0 18px;
}

.required {
    position: relative;  
}
.required:after {
    content: '*';
    color: #f00;
    font-size: 14px;
    position: absolute;
    right: -8px;
    top: 9px;
}
label.required:after {
    content: '\00a0\*';
    position: static;
}

[id=serviceContainer] .rr-required-msg,
[id=serviceContainer] .error {
    color: #f00;
    font-size: 14px;
    margin-top: 6px;
}
    [id=serviceContainer] .error p {
        color: #f00;
    }

[id=serviceContainer] h1 {
    font-size: 34px;
}
[id=serviceContainer] h2 {
    font-size: 23px;
    margin: 0 0 .3em;
    }
[id=serviceContainer] h2.h3 {
    font-size: 18px;
    color: #646464;
}
[id=serviceContainer] h3 {
    font-weight: bold;
    font-family: 'Roboto Slab', serif;
}
[id=serviceContainer] p {
    font-size: 16px;
    margin: 0 0 1em;
}
[id=serviceContainer] ol {
    display: inline-block;
    width: 100%;
}

[id=serviceContainer] ul{
    display: inline-block;
}
.flex-wrapper{
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.flex-wrapper .justify-left {
   -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

[id=serviceOptions] {
    width: 880px;
    max-width: 96vw;
    margin: auto;
    padding: 32px 0 80px;
     -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

[id=navChoices] li {
    cursor: pointer;
    position: relative;
    padding-left: 84px;
    margin-bottom: 3rem;
}
    [id=navChoices] li div * {
        font-weight: bold;
    }

[id=navChoices] [class^=icon]:before{
    color: #1184da;
    font-size: 58px;
    position: absolute;
    left: 0;
}
[id=navChoices] [class^=icon] p:after{
    content: '\E81D';
    font: normal 80%/1.2 vitacost;
    margin-left: .5em;
}

[id=navChoices] .track * {
color: #1cb8d1;
}
[id=navChoices] .replace *{
color: #92c03c;
}
[id=navChoices] .faq *{
color: #b086c5;
}
[id=navChoices] li:hover .h1 {
color: #1184da;
}

[id=home-ServiceChat] li {
    position: relative;
    padding-left: 36px;
    cursor: pointer;
}
[id=home-ServiceChat] li p {
        padding-top: 0;
        font-size: 13px;
    }
    [id=home-ServiceChat] li:hover p {
        color: #1184da;
    }
[id=home-ServiceChat] li[class^=icon]:before {
    position: absolute;
    font-size: 24px;
    color: #1184da;
    left: 0;
}


.side-col {
    padding-left: 24px;
}
.side-col p {
     font-size: 12px;
}

[id=servicePortalNav] {
    padding-top: 24px;
}
.tmp-chat {
    border: 1px solid #4167B1;
    border-radius: 16px;
    display: inline-block;
    margin: 6px 0 2rem;
    padding: 6px 22px;
    background: #fff;
    outline: none;
}
.tmp-chat:hover {
    background: #0085CF;
    color: #fff;
}

.grid-block {
    width: 500px;
    max-width: 96vw;
    margin: 80px auto 32px;
}
.address.editable.service-email {
    width: 100%;
}
[id=serviceContainer] .address label
 {
    width: 160px;
    margin: 0;
    padding-right: 1em;
    text-align: right;
    line-height: 32px;
}
 .address li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
     -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
              padding: .75rem 0;
}

[id=serviceContainer] input[type=text],
[id=serviceContainer] input[type=email],
[id=serviceContainer] input[type=tel],
[id=serviceContainer] select {
    width: 310px;
    max-width: 100%;
    font-size: 14px;
    padding: 0 6px;
    box-shadow: none;
    border: solid 1px darkgray;
    border-radius: 3px;
    height: 30px;
    line-height: 30px
}
[id=serviceContainer] select {
    padding-right: 0;
    width: auto;
}
[id=findOrder] .button-wrapper,
[id=trackOrdersPage] .button-wrapper
 {
    width: 310px;
    max-width: 100%;
}
[id=ContentWrapper] .submit-invalid {
    background: #ddd;
}
.rr-content {
    width: 100%;
}
.orders-block {
        margin-bottom: 32px;
}
.orders-block .head {
    font-weight: bold;
}
.service-content .flex-row:last-child {
    border: 0;
}
.orders-block .row {
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 10px 0;
    position: relative;
    border-bottom: solid 1px #ededed;
    }
.service-content .flex-row:last-child {
    border: 0;
}
.orders div {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 120px;
    -ms-flex: 0 1 120px;
    flex: 0 1 120px;
    text-align: left;
    font-size: 14px;
    padding: 0 4px;
    position: relative
}
.orders .item-row {
    width: 100%;
}
.orders:nth-child(odd) {
    background: rgba(28, 183, 206, 0.2);
}
.row.orders.head {
    background: transparent;
}
.order-number a {
    font-weight: bold;
}
.orders div.order-comments {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2%;
    flex: 2;
}
.order-action.radio {
    text-align: center;
}
.submit {
    margin-bottom: 3rem;
}

[id=inelligibleOrders],.top-border {
    border-top: solid 1px #999;
}

#serviceContainer .inelgibileProductList {
    background: #fff;
    font-size: 11px;
    border: solid 3px #456fc6;
    box-shadow: 6px 6px 8px rgba(0,0,0,.4);
    padding: 12px 10px 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 90vw;
    border-radius: 8px;
    left: 0;
}
[class$=Popupclose]:before {
    content: '\E828';
    font-family: vitacost;
    position: absolute;
    right: 5px;
    top: 5px;
    display: inline-block;
    font-size: 1.5rem;
}
.popup-content {
    max-height: 300px;
    overflow-y: auto;
}

.orders-block .cart-description{
    padding-top: 0;
    width: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
    white-space: normal;
}

.popup-content .cart-holder div {
    padding: 0;
}
.popup-content .cart-holder .item-row {
display: inline-block;
border-top: solid 1px #999;
padding-top: .5rem;
}
.popup-content .cart-holder .item-row + .item-row {
    
margin-top: 1rem;
    
}
.popup-content .cart-holder .photo {
    height: 50px;
    width: 50px;
}
[id=thankYouPage] .cart-holder .photo {
    width: 75px;
}
.cart-holder .photo img {
    max-width: 100%;
    max-height: 100%;
}
.popup-content .cart-holder .pricing-block .column {
    width: 48%;
}
h3.ineligblePopupHead {
    margin: 10px 4px;
}

[id=chooseRRItems] textarea {
    width: 390px;
    height: 4rem;
    max-width: 90%;
}

[id=chooseRRItems] .column.dd-col {
    min-width: 160px;
}
[id=chooseRRItems] .column .qty-field{
    width: 4rem;
    margin-bottom: 5px;
}
[id=chooseRRItems] .col-check {
    width: 32px;
    margin-bottom: -57px;
    position: relative;
    z-index: 2;
}
[id=chooseRRItems] .cart-title.column {
    position: relative;
    z-index: 1;
    padding-left: 32px;
}
.add-comment {
    font-size: 14px;
    line-height: 32px;
}

[id=chooseRRItems] .photo {
    display: table-cell;
    width: 110px;
    height: 110px;
    text-align: center;
    background: #fff;
    padding: 10px;
}
.item-row > .item-row {
border-bottom: 0;
border-top: dotted 1px #ddd;
}
.item-row .box-msg {
    margin-top: 10px;
    text-align: center;
    width: 100%;
    font-size: 14px;
    color: orange;
}


.row.active {
    background: #E7F5FF;
}
.rr-order-number,.rr-summary {
    color: #666;
    padding: 18px;
    border-bottom: 1px solid #ccc;
    background-color: #f1f1f1;
}
.rr-box-number {
    color: #666;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    position: relative;
    top: -1px;
    margin: 0;
    line-height: 32px;
    padding-left: 14px;
}
.rr-content .rr-order-number,
.rr-content .rr-box-number {
    margin: 0;
}
.spaced {
    margin: 1rem;
}
.rr-content.box-bordered .button1 {
    margin: 1rem;
}
.rr-content.box-bordered .message {
    padding-left: 1rem;
}
.box-bordered h2 {
    margin: 0;
}


.desktop [id=chooseRRItems] .col-check {
    padding-top: 10px;
}

.cart-status {
    color: green;
    display: inline-block;
    width: 100%;
    font-weight: bold;
    font-size: 1rem;
}
.cart-status label {
    color: #000;

}
h1.icon-check-circle {
    color: #92c03e;
}
.box-footer {
    border-top: solid 1px #ccc;
    color: green;
    font-weight: bold;
        text-align: right;
    font-size: 1.25rem;
}
[id=thankYouPage] span.photo {
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
[id=thankYouPage] .pricing-block .column {
    width: 19%;
    text-align: center;
}
[id=thankYouPage] .header-row .item-block,
[id=thankYouPage] .cart-status {
    padding-left: 10px;
}
[id=thankYouPage] .cart-status {
    padding-top: 10px;
    font-size: 1rem;
}
.rr-title-block.rr-thank-you {
    margin-bottom: 32px;
    margin-top: 40px;
}
.rr-title-block.rr-thank-you h1{
        font-size: 16px;
}
.current-order {
    font-size: 16px;
}

.track-order.flex {
    width: 100%;
        margin-bottom: 3rem;
}
.track-order .col {
    display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    margin-right: -1px;
    width: 40%;

    
}

.track-order .col-ok {

    padding: .5em;
    width: 100%;
    font-size:1.25em;
    background-color:#B8FFC7;
    color:darkgreen;
     margin-bottom:12px;
}

.track-order .col-exception {

    padding: .5em;
    width: 100%;
    font-size:1.25em;
    background-color:#FFC0B9;
    color:#f00;
    margin-bottom:12px;
}


    .track-order .col + .col {
        width: 60%;
    }
.track-order .col > div {
     -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    margin-bottom: 2rem;
    font-size: 14px;
}
.track-order .col > div label {
    border-bottom: solid 1px #ccc;
    margin-bottom: 10px;
    color: #646464;
    font-weight: bold;
    height: 24px;
    display: inline-block;
}
#trackOrder .check-row label {
    border-top: solid 1px #ccc;
    border-bottom: 0;
    padding-top: 10px;
    margin-top: 23px;
    height: auto;
}


#trackOrder .check-row .select-wrap {
    width: 160px;
}
#trackOrder .check-row .small {
    height: 32px;
    margin-left: 10px;
}
#trackOrder .photo img {
    float: none;
    margin: 0 auto;
}
#trackOrder .item-row {
    border-top: solid 1px #ddd;
    border-bottom: 0;
}
.track-row + .track-row {
    border-top: solid 2px #1bb8d1;
}
.whats-in-box {
    background: url(/customerservice/assets/img/box.png) no-repeat 0 0;
    background-size: 16px;
    padding-left: 22px;
    border-bottom: solid 2px #ccc;
}
.cart-holder {
    width: 100%;
}
.cart-holder-wrapper {
    width: 100%;
}
.track-order .cart-holder {
    -webkit-box-flex: 1;
  -webkit-flex: 1 0 100%;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%;
    min-width: 100%;
}

#moxieFAQ  {
    width: 100%;
    overflow-y: scroll;
    height: 100%;
    min-height: 1200px;
}


.service-email .formMatch {
    margin-left: 164px;
}
.service-email select {
    margin-left: 4px;
}
.service-email #message {
    vertical-align: top;
}

.service-email .validate-block {
    max-width: 400px;
      -ms-flex-flow: column wrap;
      flex-flow: column wrap;
}
.service-email .validate-block p{
      color: #f00;
    margin-top: 6px;
    font-size: 95%;
}

/*Tablet Overrides */
.tablet [id=servicePortalView] {
    padding-left: 2vw;
}
.tablet .track-order .col .check-row,
.tablet .track-order .col .select-row,
.tablet .track-order .col .check-row label,
.tablet .track-order .col .select-row label {
    border: 0;
    padding-bottom: 0;
}
.tablet .track-order .col + .col div{
    margin-bottom: 1rem
}

[id=findOrder] label {
    padding-right: 0;
}
.mobile [id=findOrder].address input {
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    max-width: 90vw;
}


.tablet [id=orderPackageWithItems] .rr-content {
    max-width: 95vw;
}
.tablet [id=chooseRRItems] .cart-title.column {
    padding-left: 40px;
}

.phone [id=refundReplacementPage] .flex-row {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    [id=chooseRRItems] .photo {
    width: 85px;
    height: 85px;
    min-width: 85px;
    min-height: 85px;
}
}


 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    [id=refundReplacementPage] {
    max-width: 94vw;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.flex-wrapper {
    -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
}
.flex-wrapper .flex-main,
.flex-wrapper  .flex-side
 {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
    flex: 1 0 100%;
}
.col-wrapper {
    padding-right: 3vw;
}
[id=orderPackageWithItems] .item-block,
[id=orderPackageWithItems] .pricing-block {
    width: 100%;
}
[id=orderPackageWithItems] .pricing-block {
    padding-left: 40px;
}
.track-order .col + .col{
    -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}
#trackOrder .check-row label {
    border-top: 0;
    margin-top: 0;
}

}

.tablet .flex .add-comment {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
    flex: 1 0 100%;
}
.mobile .col-wrapper .col li {
    -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}
.mobile .col-wrapper .col li label{
    text-align: left;
}
.tablet [id=trackOrdersPage] h1 {
    padding-left: 10px;
}
.tablet #trackingSearchForm .col {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 48%;
    flex: 1 1 48%;
}
.mobile #faq-search-field {
    -webkit-appearance: none;
    border-radius: 0;
    height: 34px;
    line-height: 34px;
}

/*TEMPORARY: A/B Test*/

.add-comment {
    line-height: normal;
    margin: 1em 0 .5em;
}
    .add-comment em {
        color: red;
        font-weight: bold;
    }