/* Contact Page*/

/*OnlyNeededforPrototyping*/
  
  
  /*PageCSS*/
  #contact-page a{text-decoration: underline;}
  #contact-page .greyTitleBox-noBc{padding-left: 0px;padding-right:0;width:100%;background:none; margin-top: 26px;}
  #contact-hdr-container .contact-hdr{padding-left: 0px; padding-bottom:10px; background:none; margin-top: 26px;font:var(--font18)}
  #contact-page .greyTitleBox-noBc hr{margin-bottom: 26px;}
  .searchboxtext{font-weight: bold; font-size: 18px; padding-bottom: 6px;}
  .customersupportbox{width: 990px;min-height:320px;background: url('/i/images/banner_image.jpg')no-repeat;}
  .customersupportbox .nanorep{padding: 125px 0 0 50px;}
  .clear{clear: both;}
  .nanorepfaqs{margin-top: 20px;}
  .nanorepfaqs .col, .contactdata .col{width: 310px;float: left; margin-left: 30px;; padding:0;}
  .nanorepfaqs .col:first-child, .contactdata .col:first-child{margin-left: 0px;}
.coltitle{font-size: 18px;}
  hr{border-bottom: 1px solid #dfdfdf; border-top:0px; border-right: 0px; border-left: 0px; margin: 15px 0;}
  .coltitlesm{font-size: 14px; font-weight: bold;}
  .colcontent{float: left;}
  .smColContent{width:55%;}
  .colcontent p{margin-bottom: 10px;  line-height: 1.3em; font-size: 14px;}
  .ru .ruCol{width:165px}
  .contactdata .col .form{clear: both; padding-top: 10px !important;}
  .col .clear{margin-bottom: 30px;}
  
/*NanoRepStuff*/
  .nanoRepMP_title_cl{color:#666; background: none; padding: 0px;text-decoration: underline; font-size: 14px;}
  .nanoRepMP_title_cl:hover{color:#367600;}
  .nanoRepMP_title_op{color:#367600; background: none; padding: 0px;text-decoration: underline; font-size: 14px;}
  .nanoRepMP_likeIcon{display: none;}
  .nanoRepMP_summary{font-size: 14px;color: #666;}
  .nanoRepMP_summary a{color:#367600;text-decoration: underline;}
  .nanoRepMP_summary a:hover{color:#ff6600;}
  
  /*NanoRep-HiddenStuff*/
  #footerNanoRepLink{display: none;}
  
  /*NewSpriteStuff*/
  .sprite { background-image: url('support-icon_sprite2@1x.png'); float: left; margin-right: 6px; margin-top: -2px } 
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .sprite { background-image: url('support-icon_sprite2@1x.png'); background-size: 216px 216px; float:left; width:24px; height: 24px; margin-right: 6px; margin-top: -2px; } } .sprite-customer-service-icon-01-shipping { width: 24px; height: 24px; background-position: 0 0; } .sprite-customer-service-icon-02-shopping { width: 24px; height: 24px; background-position: -24px -24px; } .sprite-customer-service-icon-03-account { width: 24px; height: 24px; background-position: -48px -48px; } .sprite-customer-service-icon-04-contactform { width: 24px; height: 24px; background-position: -72px -72px; } .sprite-customer-service-icon-05-chatwithus { width: 24px; height: 24px; background-position: -96px -96px; } .sprite-customer-service-icon-06-emailus { width: 24px; height: 24px; background-position: -120px -120px; } .sprite-customer-service-icon-07-writetous { width: 24px; height: 24px; background-position: -144px -144px; } .sprite-customer-service-icon-08-callus { width: 24px; height: 24px; background-position: -168px -168px; } .sprite-customer-service-icon-09-international { width: 24px; height: 24px; background-position: -192px -192px; }
  
  /*Form CSS that I got from the tablet website CSS*/
#contact-page input[type=text],#contact-page input[type=search],#contact-page input[type=tel],#contact-page input[type=email],#contact-page input[type=password],#contact-page input[type=number],#contact-page input[type=date],#contact-page textarea
{
    -webkit-appearance:none;
    -webkit-backface-visibility:hidden;
    -webkit-tap-highlight-color:none;
    border:0px;
    font-size:1em;
    width:100%;
    height:100%;
    padding:0em .5em;
    font-family:Helvetica, Arial, Sans-Serif;
    box-sizing:border-box;
    outline:none;
    font-weight: normal;
    color: #000;
    font-size: 14px;
    opacity: 1;
}

#contact-page select
{
    
    -webkit-backface-visibility:hidden;
    -webkit-tap-highlight-color:none;
    border:0px;
    font-size:1em;
    width:100%;
    height:100%;
    padding:0em .5em;
    font-family:Helvetica, Arial, Sans-Serif;
    box-sizing:border-box;
    outline:none;
    font-weight: normal;
    color: #000;
    font-size: 14px;
    opacity: 1;
}

#contact-page option{
    font-weight:normal;
}

#contact-page input[type=text]:focus, #contact-page input[type=search]:focus, #contact-page input[type=tel]:focus, #contact-page input[type=email]:focus, #contact-page input[type=password]:focus, #contact-page input[type=number]:focus, #contact-page textarea:focus, #contact-page select:focus
{
    outline:none;
}
#contact-page input[type=submit]:disabled
{
    opacity:.3;
}
#contact-page input[type=checkbox]
{
    -webkit-appearance:none;
    -webkit-backface-visibility:hidden;
    -webkit-tap-highlight-color:none;
    width:2em;
    height:2em;
    border:solid #ccc thin;
    border-radius:.188rem;
    background:white;
}
#contact-page input[type=checkbox]:checked
{
    background:white url(http://s.iherb.com/t/i/ui/check-mark-green.png) no-repeat;
    background-size:1.5em;
    background-position:center center;
}

#contact-page .form-label {
    font-weight:bold;
    display:block;
}

#contact-page input[type=radio]
{
    -webkit-appearance:none;
    -webkit-backface-visibility:hidden;
    -webkit-tap-highlight-color:none;
    background-color:White;
    border-radius:1em;
    border: thin solid #ccc;
    width:1.75em;
    height:1.75em;  
}
#contact-page input[type=radio]:checked
{
    background-image:url(http://s.iherb.com/t/i/ui/radio-checked.png);
    background-repeat:no-repeat;
    background-size:1.55em;
    background-position:0 0;
    background-color:transparent;
}

#contact-page select{padding-left: 3px;}

.selectArrow2:after {
    display:inline-block;
    position:relative;
    bottom:-.67em;
    left:.4em;
    content:'';
    width: 1em; 
    height: 1.25em; 
    margin-left:-30px;
    background-image: url('../t/i/ui/left.png');
    background-size:.75em;
    opacity:.2; 
    background-repeat:no-repeat; 
    background-position:0 0;
}
.selectArrow3:after {
    display: inline-block;
    position: absolute;
    bottom: 28%;
    right: 1em;
    content: '';
    width: 1em;
    height: 1.25em;
    background-image: url('../t/i/ui/left.png');
    background-size: .75em;
    opacity: .2;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.hide-save-message {
    display:none;
}

.customersupportbox {
    position: relative;
}

.stella-wrapper {
    width: 100%;
    float: left;
    padding: 15px 0;
    margin: 25px 0 0;
    border-bottom: 1px solid #dfdfdf;
    border-top: 1px solid #dfdfdf;
}

.stella-wrapper a {
    float:right;
}

.stella-wrapper p {
    float:left;
    width:865px;
}

.stella-wrapper h3 {
    color: #458500;
    padding-bottom: 5px;
}

.customersupportbox:after {
    content: url('../i/Powered-by-NanoRep_Logo@2x.png');
    position: absolute;
    right: 0;
    bottom: -5px;
    transform: scale(.8);
    -ms-transform: scale(.8);
    -moz-transform: scale(.8);
    -webkit-transform: scale(.8);
    -o-transform: scale(.8);
}

#contact-page .input-container
{
    border:solid #ccc thin;
    border-radius:.188rem;
    background-color:#fff;
    padding:5px 0 4px 0;
    margin-bottom:8px;
}
#contact-page .input
{
    border-top:solid #ccc thin;
    position:relative;

    padding: 12px 5px;
}
#contact-page .input-none
{
    
}
#contact-page .input-container .input
{
    border-right:solid #ccc thin;
}
#contact-page .input-right-none
{
    border-right: none !important;
}

#contact-page .input-container .input:nth-of-type(1), #contact-page .input.w50:nth-of-type(2):not(.top-line), #contact-page .w25.input:not(.top-line)
{
     border-top:0px;
}
#contact-page .top-line
{
    border-top:solid #ccc thin;
}
#contact-page .input2
{
    border: thin solid #d5d5d5;
    height: 2.5em;
    background-color:#fff;
}
#ContactSubmit {
    width:100%;
}

#contact-page .form textarea{ height: 100px;resize: none;}

#contact-page .form button{background-color: #ff8a00; border: 0px; padding: 9px 51px; font-size: 18px; color: #fff; font-weight: bold;margin-top: 16px;}

#contact-page .form button:hover{background-color: #e78200; cursor: pointer;}

#nanoRepEmbedContainer > iframe{
    width: 630px !important;
    position: relative !important;
    z-index: 1 !important;
    border: 0px !important;
    margin: 0px !important;
    
}

 #livechat-full {
        position: fixed !important;
        width: 400px !important;
        height: 386px !important;
        right: 2px !important;
        bottom: 2px !important;
        
    }

        #livechat-full > iframe {
            width: 401px !important;
            height: 386px !important;
            border: 0px !important;
            z-index: 10 !important;
            overflow: hidden !important;
        }