﻿
.lhnHocChatBtnCont, div#lhnHocButton div.lhnHocChatBtn, #lhnHelpOutCenter button.form_submit, #lhnHelpOutCenter button.lhnFormButton {
    background-color: #ad1b1c !important
}

#lhnHelpOutCenter input#txtKeyword::placeholder, #lhnHelpOutCenter input.lhnInput::placeholder, #lhnHelpOutCenter input.sf_txtBox::placeholder, #lhnHelpOutCenter select.lhnInput::placeholder, #lhnHelpOutCenter select.sf_ddl::placeholder, #lhnHelpOutCenter textarea.lhnInput::placeholder, #lhnHelpOutCenter textarea.sf_txtArea::placeholder,
#lhnHelpOutCenter div.lhnWindow-body input#txtKeyword, #lhnHelpOutCenter div.lhnWindow-body input.lhnInput, #lhnHelpOutCenter div.lhnWindow-body input.sf_txtBox, #lhnHelpOutCenter div.lhnWindow-body select.lhnInput, #lhnHelpOutCenter div.lhnWindow-body select.sf_ddl, #lhnHelpOutCenter div.lhnWindow-body textarea.lhnInput, #lhnHelpOutCenter div.lhnWindow-body textarea.sf_txtArea {
    color: #fff
}

.lhnSubmit.hocPrechat.lhnFormButton {
    border-radius: 0 !important;
    text-transform: none
}

#lhnHocButton {
    width: 56px !important;
    height: 224px !important;
    background-image: url(https://files.whiteflash.com/images/boldchat/chat_bubble_20160201.png);
    background-repeat: no-repeat;
    right: 0 !important;
    bottom: 37% !important;
    background-size: 56px 224px !important
}

#lhnHocHeader {
    height: 2.3em;
    line-height: 2.3em;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 1.2em !important;
    padding: 0 20px !important
}

.lhnHocChatBtnCont {
    display: none
}

#lhnHelpOutCenter div.lhnWindow-header h3 {
    font-weight: 100 !important;
    line-height: 1.3em !important;
    letter-spacing: 0 !important;
    font-size: 16.8px !important;
    display: inline-block !important
}

.lhnLabel {
    display: none !important
}

.lhnWindow-header-text {
    width: 90% !important;
    padding-left: 32px !important
}

    .lhnWindow-header-text span {
        display: none
    }

    .lhnWindow-header-text h3:after {
        content: 'Chat'
    }

.lhnWindow-header-controls {
    width: 10% !important
}

.lhnSubmit.hocPrechat.lhnFormButton {
    width: 100% !important;
    float: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: #01A5EE;
    background-color: #ad1b1c !important;
    color: #fff !important;
    font-size: 18.2px !important;
    line-height: 1.3em !important;
    font-weight: 100 !important;
    padding: .7em !important;
    outline: none !important;
    -webkit-border-radius: 0 !important;
    text-transform: none !important;
    height: 48px !important
}

#lhnHelpOutCenter button.form_submit, #lhnHelpOutCenter button.lhnFormButton {
    letter-spacing: 0
}

#hocContainer {
    background-color: rgba(35,35,35,0.85) !important
}

#lhnHelpOutCenter div.lhnWindow-body {
    color: #fff
}

#lhnHelpOutCenter {
    background-color: transparent !important;
    width: 525px !important;
    height: 530px !important;
    font-size: 14px !important
}   

    .lhnPreChatForm {
        font-size: 15.4px !important
    }

div#lhnHelpOutCenter.lhnWindow.lhnActive.circleButton {
    bottom: 0 !important;
    right: 0 !important;
    font-size: 14px !important
}

@media (max-width: 1280px) {
    #lhnHocButton {
        width: 37px !important;
        height: 137px !important;
        background-size: 37px 137px !important;
        bottom: 43% !important
    }

    #lhnHelpOutCenter {
        width: 525px !important
    }
}

#lhnHelpOutCenter div.lhnWindow-body.no-menu {
    overflow: hidden !important
}

#lhnHelpOutCenter div.lhnSystemMessage div.lhnWindow-message, .lhnSystemMessage.lhnWindow-message--container, .lhnPrompt.closechat, .lhnWindow-chat_input, .message.input {
    background-color: transparent !important
}

.lhnFieldInput input, .lhnFieldInput textarea {
    background-color: #232323 !important;
    border: none !important;
    border-bottom: .09em solid #6F6F6F !important;
    color: #fff !important;
    outline: none;
    border-radius: 0 !important;
    height: 19px !important;
    padding: 0 !important;
    resize: none !important;
    font-size: 15.4px
}

#lhnHelpOutCenter div.lhnWindow-body {
    padding: 1.1em;
    font-size: 1em
}

    #lhnHelpOutCenter div.lhnWindow-body form {
        margin-top: 0 !important
    }

.lhnFields {
    background-color: #232323 !important;
    padding: 1em .7em 0 !important;
    font-size: 14px !important
}

#lhnHelpOutCenter div.lhnField {
    margin-bottom: 14.6px !important
}

.lhnSubmit.hocPrechat.lhnFormButton {
    margin-top: -5.2px
}

.lhnPreChatForm p {
    font-weight: 100;
    font-size: 1.1em;
    margin: 0 0 .2em;
    width: 100%;
    padding: .5em;
    line-height: 1.2 !important
}

#lhnWindowFooter {
    background-color: rgba(35,35,35,0.85) !important
}

.lhnFieldInput textarea {
    line-height: 1.2 !important;
    height: 40px !important;
    overflow: auto !important;
    min-height: 41px !important
}

.lhnWindow-header-avatar {
    width: 0 !important;
    padding-top: 4px
}

.lhnField.lhnNot-valid input {
    border: 1px solid red !important
}

.message.input {
    outline: none
}

#lhnHelpOutCenter div.lhnChatActions {
    background-color: #000 !important
}

    #lhnHelpOutCenter div.lhnChatActions a:hover {
        background-color: #aa2525
    }

div#lhnHelpOutCenter.lhnWindow *, div#lhnHelpOutCenter.lhnWindow ::after, div#lhnHelpOutCenter.lhnWindow ::before {
    font-family: sans-serif !important
}

.lhnChatActionsMenu {
    display: none !important
}

.lhnWindow-header-avatar {
    display: none !important
}

.lhnWindow-header-text.lhnWindow-chat h4 {
    display: none !important
}

#lhnHelpOutCenter div.lhnWindow-message {
    border-radius: unset !important
}

#lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message {
    background-color: #212021 !important;
    color: #fff !important;
    font-size: 1em
}

    #lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message:after {
        border-color: transparent transparent #212021 !important
    }

#lhnHelpOutCenter div.lhnPrompt button.lhnFormButton.lhnPromptDecline {
    background-color: #fff !important
}

.lhnOperatorMessage.lhnWindow-message--container span:first-child {
    display: block !important
}

.lhnOperatorMessage.lhnWindow-message--container span.lhnTime {
    display: block !important;
    color: #ad1818 !important
}

.lhnCustomerMessage.lhnWindow-message--container div.lhnWindow-message {
    font-size: 1em !important;
    color: #000 !important
}

.lhnCustomerMessage.lhnWindow-message--container span:first-child {
    display: block !important
}

.lhnCustomerMessage.lhnWindow-message--container span.lhnTime {
    display: block !important
}

@media(max-width:767px) {
    #lhnHocButton {
        width: 60px !important;
        height: 60px !important;
        background-size: 60px 60px !important;
        background-image: url(https://files.whiteflash.com/images/boldchat/chat_bubble_small.png);
        bottom: 47px !important;
        right: 15px !important;
        z-index: 10 !important
    }
}

@media (max-width: 812px) {
    #lhnHelpOutCenter {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important
    }
}

#lhnHelpOutCenter div.lhnWindow-body input.lhnInput {
    line-height: 16.8px
}

.lhnPrompt.sms {
    background-color: rgba(35,35,35,1) !important
}

.lhnSurveyForm .lhnLabel {
    display: block !important
}

.lhnSurveyForm {
    height: inherit;
    overflow-y: auto;
    padding: 5px
}

.appay-panel-box {
    display: none;
    text-align: center
}

.appay-panel-box-button {
    margin-left: 4px;
    text-align: center
}

@supports (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button-with-text {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: buy
    }

        .apple-pay-button-with-text > * {
            display: none
        }

    .apple-pay-button-black-with-text {
        -apple-pay-button-style: #000
    }

    .apple-pay-button-white-with-text {
        -apple-pay-button-style: #fff
    }

    .apple-pay-button-white-with-line-with-text {
        -apple-pay-button-style: white-outline
    }
}

@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button-with-text {
        --apple-pay-scale: 1;
        display: inline-flex;
        justify-content: center;
        font-size: 12px;
        border-radius: 5px;
        padding: 0;
        box-sizing: border-box;
        min-width: 200px;
        min-height: 32px;
        max-height: 64px;
        padding-bottom: 1px;
    }

    .apple-pay-button-black-with-text {
        background-color: #000;
        color: #fff
    }

    .apple-pay-button-white-with-text {
        background-color: #fff;
        color: #000
    }

    .apple-pay-button-white-with-line-with-text {
        background-color: #fff;
        color: #000;
        border: .5px solid #000
    }

    .apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: #000
    }

    .apple-pay-button-with-text.apple-pay-button-white-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: #fff
    }

    .apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: #fff
    }

    .apple-pay-button-with-text > .text {
        font-family: -apple-system;
        font-size: calc(1em * var(--apple-pay-scale));
        font-weight: 300;
        align-self: center;
        margin-right: calc(2px * var(--apple-pay-scale))
    }

    .apple-pay-button-with-text > .logo {
        position: relative !important;
        width: calc(35px * var(--scale));
        height: 100%;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 0 50%;
        margin-left: calc(2px * var(--apple-pay-scale));
        border: none
    }
}

.cc-block.appay-panel-box.check-option-apple {
    text-align: left
}

.appay-panel-box.appay-panel-box-button {
    padding-left: 2px;
    padding-right: 2px;
    display: inline-block;
    border: 1px solid #d8b76e;
    border-radius: 5px;
    padding-top: 3px;
    margin-top: 18px;
    margin-bottom: 26px
}

@media (max-width: 1023px) {
    .appay-panel-box.appay-panel-box-button {
        margin-bottom: 27px
    }
}

@media (max-width: 400px) {
    .appay-panel-box.appay-panel-box-button {
        margin-bottom: 27px
    }
}

.__affirm-logo.__affirm-logo-blue,
.__affirm-logo.__affirm-logo-primary {
    color: #21a5eb !important
}

.user-request-alert {
    position: absolute;
    display: none;
    width: 310px;
    background: #000;
    z-index: 500;
    right: 0;
    left: 0;
    margin: auto;
    margin: auto;
    border: 1px solid #fff;
    padding-top: 10px;
    padding-bottom: 20px;
    top: 40%;
    z-index: 45
}

    .user-request-alert.active-tooltip {
        display: block
    }

    .user-request-alert .tooltip-close {
        position: absolute;
        right: 5px;
        top: 9px;
        cursor: pointer
    }

    .user-request-alert .thickness-tooltip-content .tooltip-background {
        padding-top: 12px
    }

    .user-request-alert .tooltip-text-content {
        font-family: 'Lato';
        text-align: left;
        padding-right: 20px;
        padding-left: 20px
    }

        .user-request-alert .tooltip-text-content .title-content {
            color: #e8d495;
            text-align: left;
            margin-bottom: 7px;
            font-size: 22px;
            letter-spacing: 1px;
            line-height: 1.4;
            padding-top: 2px
        }

        .user-request-alert .tooltip-text-content .main-text-content {
            font-size: 14px;
            letter-spacing: .75px;
            line-height: 1.3
        }

    .user-request-alert .main-text-content a {
        color: #d5d5d5;
        text-decoration: none;
        border-bottom: 1px solid #d5d5d5
    }

        .user-request-alert .main-text-content a:hover {
            text-decoration: none;
            border-bottom: 1px solid #d22224
        }

    .user-request-alert .jewelry_details_sprite {
        background-image: url(/images/rd/jdetails/jdspritesheet20161012.png);
        background-repeat: no-repeat;
        display: block
    }

.webp-support .user-request-alert .jewelry_details_sprite {
    background-image: url(/images/rd/jdetails/jdspritesheet20161012.webp)
}

.user-request-alert .jewelry_details_sprite-close {
    width: 23px;
    height: 20px;
    background-position: -153px -118px
}

.showroom-pop-up {
    position: absolute;
    display: none;
    width: 848px;
    background: #000;
    z-index: 500;
    right: 0;
    left: 0;
    margin: auto;
    margin: auto;
    border: 1px solid #fff;
    padding-top: 10px;
    padding-bottom: 20px;
    top: 25%;
    z-index: 50
}

    .showroom-pop-up.active-tooltip {
        display: block
    }

    .showroom-pop-up .tooltip-close {
        position: absolute;
        right: 5px;
        top: 9px;
        cursor: pointer
    }

    .showroom-pop-up .thickness-tooltip-content .tooltip-background {
        padding-top: 12px
    }

    .showroom-pop-up .tooltip-text-content {
        font-family: 'Lato';
        text-align: left;
        padding-right: 20px;
        padding-left: 20px
    }

        .showroom-pop-up .tooltip-text-content .title-content {
            color: #e8d495;
            text-align: center;
            margin-bottom: 7px;
            font-size: 22px;
            letter-spacing: 1px;
            line-height: 1.4;
            padding-top: 10px
        }

        .showroom-pop-up .tooltip-text-content .main-text-content {
            font-size: 14px;
            letter-spacing: .75px;
            line-height: 1.3
        }

    .showroom-pop-up .jewelry_details_sprite {
        background-image: url(/images/rd/jdetails/jdspritesheet20161012.png);
        background-repeat: no-repeat;
        display: block
    }

.webp-support .jewelry_details_sprite {
    background-image: url(/images/rd/jdetails/jdspritesheet20161012.webp)
}

.showroom-pop-up .jewelry_details_sprite-close {
    width: 23px;
    height: 20px;
    background-position: -153px -118px
}

.showroom-pop-up a.close-btn {
    color: #000 !important;
    cursor: pointer;
    width: 140px;
    height: 41px;
    display: inline-block;
    text-align: center;
    border: solid 1px #d3b36c !important;
    background-color: #daba70;
    font-size: 18px;
    padding-top: 8px;
    text-decoration: none !important;
    letter-spacing: 2.6px;
    margin-top: 25px;
    margin-bottom: 6px
}

.showroom-pop-up .po-pup-ul {
    margin-left: 20px
}

@media (max-width: 1023px) {
    .showroom-pop-up {
        width: auto !important
    }
}


.welcome-message-popup {
    position: relative;
    display: none;
    width: 1000px;
    height: 770px;
    background: #000;
    z-index: 500;
    margin: auto;
    padding-top: 30px;
    border: 1px solid #969696;
    padding-top: 10px;
    padding-bottom: 30px;
    top: 10%;
    z-index: 50
}

    .welcome-message-popup .tooltip-text-content .wmp-s2 .main-text-content {
        max-width: 470px;
    }

    .welcome-message-popup.active-tooltip {
        display: block
    }

    .welcome-message-popup .tooltip-close {
        position: absolute;
        right: 5px;
        top: 9px;
        cursor: pointer
    }

    .welcome-message-popup .thickness-tooltip-content .tooltip-background {
        padding-top: 12px
    }

    .welcome-message-popup .tooltip-text-content {
        font-family: 'Lato';
        text-align: left;
        padding-right: 20px;
        padding-left: 20px;
        text-align:center;
        font-size:17px;
        line-height:23px;
    }

        .welcome-message-popup .tooltip-text-content .title-content {
            color: #e8d495;
            font-weight: 400;
            text-align: center;
            margin-bottom: 12px;
            font-size: 32px;
            /* letter-spacing: 1px; */
            line-height: 40px;
            padding-top: 10px;
        }

        .welcome-message-popup .tooltip-text-content .main-text-content {
            font-size: 17px;
            /* letter-spacing: .75px; */
            line-height: 23px;
            max-width: 404px;
            margin: auto;
            font-family: "Lato";
            text-align: center;
        }

#wmp-firstname-txt, #wmp-lastname-txt{
    width: 215px;
}

#wmp-firstname-txt{
    margin-right: 5px;
}

.welcome-message-popup .tooltip-text-content .wmp-phone {
    margin-top: 13px;
}

    .welcome-message-popup .tooltip-text-content .wmp-phone input {
        width: 439px;
    }

.welcome-message-popup .tooltip-text-content .wmp-email {
    margin-top: 23px;
}
            .welcome-message-popup .tooltip-text-content .wmp-email input {
                width: 439px;
            }


    .welcome-message-popup .wpm-textbox {
        border: solid 1px #969696;
        background: #000;
        height: 49px;
        outline: none;
        padding-left: 15px;
        padding-right: 15px;
        font-family: 'Lato';
        font-size: 22px;
        color: #dfdfdf;
        padding-bottom: 3px;
        border-radius: 0;
        appearance: none;
        
        text-align: center;
    }
.welcome-message-popup .tooltip-text-content .wmp-submit a,
.welcome-message-popup .tooltip-text-content .wmp-submit button {
    color: #fff;
    cursor: pointer;
    height: 49px;
    display: inline-block;
    text-align: center;
    background: #d22224;
    font-size: 22px;
    line-height: 23px;
    text-decoration: none;
    /* letter-spacing: 2.6px; */
    border: none;
    outline: none;
    padding: 13px 14px;
    width: 439px;
    font-weight: 400;
}
        .welcome-message-popup .tooltip-text-content .wmp-submit{
            margin-top: 13px;
        }

.wmp-overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.685);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9998;
    display: block;
    overflow-x:hidden;
}


        .welcome-message-popup .jewelry_details_sprite {
            background-image: url(/images/rd/jdetails/jdspritesheet20161012.png);
            background-repeat: no-repeat;
            display: block
        }
.welcome-message-popup .jewelry_details_sprite-close {
    width: 23px;
    height: 20px;
    background-position: -153px -118px
}

        @media(max-width: 1008px){
            .welcome-message-popup{
                width: 99%;
            }
        }

@media(max-width: 485px) {
    #wmp-firstname-txt {
        margin-right: 0px;
        margin-bottom: 13px;
    }

    #wmp-firstname-txt, #wmp-lastname-txt,
    .welcome-message-popup .tooltip-text-content .wmp-email input,
    .welcome-message-popup .tooltip-text-content .wmp-submit a,
    .welcome-message-popup .tooltip-text-content .wmp-submit button,
    .welcome-message-popup .tooltip-text-content .wmp-phone input {
        width: 80%;
    }
}

@media (max-width: 683px) {
    .welcome-message-popup {
        height: auto;
        padding-bottom: 15px;
    }
}

@media(max-width: 405px){
    #wmp-firstname-txt, #wmp-lastname-txt,
    .welcome-message-popup .tooltip-text-content .wmp-email input,
    .welcome-message-popup .tooltip-text-content .wmp-submit a,
    .welcome-message-popup .tooltip-text-content .wmp-submit button,
    .welcome-message-popup .tooltip-text-content .wmp-phone input {
        width: 85%;
    }
}
        @media(max-width: 767px){
            .wmp-descktop-logo{
                display:none!important;
            }
            .wmp-emage-popup{
                width: 100%;
            }
        }

.showroom-message-popup {
    position: relative;
    display: none;
    width: 498px;    
    background: #000;
    z-index: 500;
    margin: auto;
    padding-top: 30px;
    border: 1px solid #969696;
    padding-top: 10px;
    padding-bottom: 15px;
    top: 18%;
    z-index: 50
}

.showroom-message-popup .tooltip-text-content .wmp-s2 .main-text-content {
    max-width: 470px;
}

.showroom-message-popup.active-tooltip {
    display: block
}

.showroom-message-popup .tooltip-close {
    position: absolute;
    right: 5px;
    top: 9px;
    cursor: pointer
}

.showroom-message-popup .thickness-tooltip-content .tooltip-background {
    padding-top: 12px
}

.showroom-message-popup .tooltip-text-content {
    font-family: 'Lato';
    text-align: left;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
    font-size: 17px;
    line-height: 23px;
}

    .showroom-message-popup .tooltip-text-content .title-content {
        color: #e8d495;
        font-weight: 400;
        text-align: center;
        margin-bottom: 3px;
        font-size: 32px;
        /* letter-spacing: 1px; */
        line-height: 40px;
        padding-top: 10px;
    }

    .showroom-message-popup .tooltip-text-content .main-text-content {
        font-size: 17px;
        /* letter-spacing: .75px; */
        letter-spacing: .2px;
        line-height: 23px;
        max-width: 404px;
        margin: auto;
        padding-bottom: 12px;
        font-family: "Lato";
        text-align: center;
    }


    .showroom-message-popup .tooltip-text-content .wmp-submit a,
    .showroom-message-popup .tooltip-text-content .wmp-submit button {
        color: #fff;
        cursor: pointer;
        height: 49px;
        display: inline-block;
        text-align: center;
        background: #d22224;
        font-size: 22px;
        line-height: 23px;
        text-decoration: none;
        /* letter-spacing: 2.6px; */
        letter-spacing: .2px;
        border: none;
        outline: none;
        padding: 13px 14px;
        width: 460px;
        font-weight: 400;
    }

.showroom-message-popup .tooltip-text-content .wmp-submit {
    margin-top: 23px;
}

.smp-overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.685);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9998;
    display: block;
    overflow-x: hidden;
}


.showroom-message-popup .jewelry_details_sprite {
    background-image: url(/images/rd/jdetails/jdspritesheet20161012.png);
    background-repeat: no-repeat;
    display: block
}

.showroom-message-popup .jewelry_details_sprite-close {
    width: 23px;
    height: 20px;
    background-position: -153px -118px
}

.welcome-message-popup .tooltip-text-content .wmp-s3 .main-text-content{
    max-width: 600px;
}

.welcome-message-popup .wmp-chaticons{
    margin-top: 35px;
    margin-bottom: 25px;
}

.welcome-message-popup .wmp-chaticons .link-class:not(:first-child){
    margin-left: 30px;
}

.welcome-message-popup .wmp-s3 #wmp-close-btn {
    width: 104px;
    height: 46px;
    padding: 8px 14px;
}

@media(max-width: 502px) {
    .showroom-message-popup{
        width: 98%;
    }
    .showroom-message-popup .tooltip-text-content .wmp-submit a,
    .showroom-message-popup .tooltip-text-content .wmp-submit button,
    .showroom-message-popup .tooltip-text-content .wmp-phone input {
        width: 98%;
    }
}

@media(max-width: 767px) {

    .smp-image-popup {
        width: 100%;
    }
}

.lhnOfflineForm .lhnLabel {
    font-size: 13px !important;
    display: block !important;
    text-transform: none !important;
}