@import url("/sites/esteelauder/themes/us/css/us_pc.css");

body.lp {
    padding:0;
    margin:0;
}

#custom-container #lp-dashboard-btn-container {
    position:fixed;
    top:2px;
    right:2px;
}

#custom-container #user-input-container { 
    width:477px;
    position:absolute;
    top:72px;
    border:1px solid lightgray;
}

#custom-container {
    margin-top:12px;
    width:850;
    overflow:hidden;

    font-family: "AkzidenzGrotesk", arial;
    font-size: 0.9em;
}
#chatLines {
    margin-bottom:12px;
    position:relative;
    overflow:hidden;
}
#chat_window,
.chat-window-container {
    overflow:hidden;
}

#chatLines .no-icon-line {
    padding:3px 6px;
}
#chatLines .icon {
    width:30px;
    height:33px;
    border:1px solid lightgray;
    float:left;
    margin: 2px 10px 0 12px;;
}
.rich-line-content {
    width:100%;
    clear:both;
}
.rich-line-content .icon { 
    float:left;
    clear:left;
}
.rich-line-content .txt-line {
    float:left;;
    width:404px;
}
.rich-line-content .line-by {
    font-weight:bold;
}


.agent-typing-msg {
    clear:both;
    padding:3px 6px;
}
/*.logs { display:none; }
#logs div { font-size:0.7em; }*/

.chat-window-container {
    position:relative;
    float:left;width:475px;height:475px;
    /* border:1px solid lightgray;
    border-top:0px; */
    overflow-y:scroll;
    overflow-x:hidden;
}


#custom-container .text-input-container {
    position:absolute;
    top:549px;
    border-right: 1px solid lightgray;
    height:167px;
    width:477px;
    padding-top:14px;
}

#custom-container .input-field-container {
    width: 373px;
    float: left;
    height: 30px;
    padding:4px 10px
}

input.chat-input-field {
    width: 355px;
    float: right;
    height: 30px;
    font-size:0.9em;
}

/* */

#closeChat,
#emailTranscript {
    cursor:pointer;
    font-family: "AkzidenzGrotesk";
    font-size:12px;
    text-decoration:underline;
}

/* */

#custom-container .btn {
    cursor:pointer;
}

#custom-container .btn-send {
    float:right;
    width:80px;
    height:35px;
    margin-right:20px;
}

#custom-container .btn-upload {
    margin:12px; 
    height: 35px;
    width: 150px;
}

#custom-container .upload-silhoette {
    width:202px;
    height:202px;
    margin:12px;
    }

#vba-logo { 
    height:40px;
    width:260px;
    margin-left:10px;
    }


/* layout */

#custom-container .right-col-top .top-right-video-container { }
#custom-container .right-col-top .top-right-photo-upload-container { }
#custom-container .right-col-top .top-right-photo-upload-container .login-text {
    font-size:0.8em;
    padding:0 12px;
}
#custom-container .right-col-top {
    position:absolute;
    top:72px;
    left:477px;
    border: 1px solid lightgray;
    border-left:0px;
    float: right;
    height: 325px;
    width: 360px;
    overflow:hidden;
}
#custom-container .right-col-bottom {
    position:absolute;
    left:477px;
    top:392px;

    float: right;
    clear:both;
    width: 360px;
    height:325px; /* height:362px; */

    border: 1px solid lightgray;
    border-left:0px;
    border-top:0px;
    border-bottom:0px;
}

#chatContainer {
    position:relative;
    margin-top:3px;

    display:none;position:absolute;height:100%;overflow:auto;width:475px;
}



/* photo upload */

#custom-container .section-heading-photo {
    margin:12px;
    letter-spacing:0.1em;
    font-weight:bold;
}
#custom-container .section-heading-consultant {
    margin:12px;
    letter-spacing:0.1em;
    font-weight:bold;
    margin-bottom:15px;
}

#custom-container .icon-consultant, #custom-container .icon-chat-visitor {
    width:74px;
    height:86px;
}

#custom-container .chat-face-icon {
    float:left;
    margin:0 12px;
}

#custom-container .consultant-name {
    float:left;
    font-size:12px;
    width:65%;
    padding-top:50px;
}

#custom-container .consultant-location {
    float:left;
    font-size:11px;
    width:65%;
    padding:6px 0px;
}

#custom-container .consultant-msg {
    padding:5px 15px;
    width:100%;
    clear:both;
    line-height:22px;
}

#photo-upload-query div {
    font-family:'OptimaDisplayLight';
}
#photo-upload-query .next-row {
    clear:both;
}
#photo-upload-query .choose-photo-btn {

}
#photo-upload-query .file-chosen-state {

}
#photo-upload-query .msg-instructions {
    margin:0 auto;
    font-size:0.9em;
    padding:12px 0 14px 0;
    width:333px;
    text-align:center;
}
#photo-upload-query .btn-instructions {
    margin:0 auto;
    font-size:0.9em;
    padding:12px 0 14px 0;
    width:360px;
    text-align:center;
}
#photo-upload-query .msg-header {
    text-align:center;
    margin-top:24px;
    font-size:1.2em;
}
#photo-upload-query .photo-upload-row {
    width:400px;
}
#photo-upload-query #choose-file-btn {
    float:left;
    height: 35px;
    padding: 8px;
    text-align: center;
    width: 175px;
    margin:0px;
    cursor:pointer;
}
#photo-upload-query #file-save-btn {
    padding-top:7px;
    width:75px;
    margin:30px auto;
}
#photo-upload-query #file-chosen-state {
    float:right;
    border:1px solid;
    height: 35px;
    padding: 6px;
    text-align: center;
    width: 175px;
}

.vba-x-close {
    height: 20px;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    cursor:pointer;
}

body.lp #cboxOverlay {
    background: none repeat scroll 0 0 #040A2B;
    opacity: 0.92;
    height: 100%;
    position: fixed;
    width: 100%;
}
body.lp #cboxOverlay {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 9999;
    display:none;
}

/* */
#beauty-consultant-panel-integrated {
    display:none;
}
#beauty-consultant-panel-integrated .btn-arrowRight {
    float: left;
    height: 32px;
    width: 18px;
    margin: 72px 0;
    cursor: pointer;
    opacity: 0.5;
}

/* */

#product-recommendations-panel {
    display:block;
}
#product-recommendations-panel .section-heading-lbl {
    margin:12px;
    letter-spacing:0.1em;
    font-weight:bold;
    margin-bottom:15px;
}
#product-recommendations-panel .product-sku-panel {
    padding:25px;
}
#product-recommendations-panel .carousel-left-arrow, 
#product-recommendations-panel .carousel-right-arrow { 
    height: 32px;
    margin: 45px 15px;
    width: 18px;
}
#product-recommendations-panel .carousel-left-arrow-off,
#product-recommendations-panel .carousel-right-arrow-off {
    opacity:0.5;
    cursor: none;
    height: 32px;
    margin: 45px 15px;
    width: 18px;
    cursor: default;
}
#product-recommendations-panel .carousel-left-arrow-off { float:left; }
#product-recommendations-panel .carousel-right-arrow-off { float:right; }

#product-recommendations-panel .carousel-left-arrow {
    float:left;
    cursor:pointer;
}
#product-recommendations-panel .carousel-right-arrow { 
    float:right;
    cursor:pointer;
}

#product-recommendations-panel .carousel-content-container  {
    width:213px;
    height:200px;
    overflow:hidden;
    float:left;
}
#product-recommendations-panel .carousel-content-container .carousel-panel-mask  {
    min-width:2000px;
    left: 0;
    position:relative;
}
#product-recommendations-panel .carousel-content-container .carousel-content-panel {
    width:213px;
    height:200px;
    float:left;
}

#product-recommendations-panel .carousel-content-container .img-col { 
    width:60px;
    float:left;
    margin-right:12px;
}
#product-recommendations-panel .carousel-content-container .img-col .mock-prod-img { 
    width:60px;
    height:90px;
}
#product-recommendations-panel .carousel-content-container .detail-col { 
    float:left;
    width:132px;
}
#product-recommendations-panel .carousel-content-container .prod-title { 
    font-size:1.2em;
    overflow:hidden; width:175px;
}
#product-recommendations-panel .carousel-content-container .prod-subtitle { 
    font-size:1.0em;
    overflow:hidden; width:175px;
}
#product-recommendations-panel .carousel-content-container .prod-units {
    padding:2px 0px;
    overflow:hidden; width:175px;
}
#product-recommendations-panel .carousel-content-container .shade-container { 
    padding:4px 0px;
    overflow:hidden;
    width:175px;
    height:22px;
}
#product-recommendations-panel .carousel-content-container .shade-container .shade-shim {
    overflow:hidden;
    float:left;
    border-radius:18px;
    -moz-border-radius:18px;
    width:18px;
    height:18px;
}
#product-recommendations-panel .carousel-content-container .shade-container .shade-name {
    overflow:hidden;
    float:left;
    width:150px;
    margin-left:2px;
}
#product-recommendations-panel .carousel-content-container .price-info { 
    font-weight:bold;
    overflow:hidden; 
    margin-top:6px;
    width:175px;
}
#product-recommendations-panel .carousel-content-container .add-to-bag-btn-container {
    margin:20px 0px;
}
#product-recommendations-panel .carousel-content-container .btn-addToBag {
    height: 33px;
    width: 132px;
    cursor:pointer;
}
#product-recommendations-panel .carousel-content-container .msg-addToBag {
    margin:12px 2px;
    display:none;
}

/* */


/* prechat overlay */
.prechat-form-container {
    width:480px;
    overflow:hidden;
}
.prechat-form-container #beauty-advice-btn {
    float:left;
}
.prechat-form-container #order-question-btn {
    float:right;
}
.prechat-form-container .instruction-msg {
    margin-bottom:16px;
    font-size:0.9em;
}
.prechat-form-container .registered-input {
    padding-bottom:12px;
}
.prechat-form-container .form-row-msg p {
    font-size:0.8em;
}
.prechat-form-container h4 {
    margin-top:25px;
    text-align:center;
}
.prechat-form-container .form-row {
    clear:both;
}
.prechat-form-container .textarea-form-row {
    padding:12px 0 6px 0;
}
.prechat-form-container .prechat-input {
    width:200px;
}
.prechat-form-container .prepopulated-input {
    margin-top:6px;
}
.prechat-form-container .form-col-one {
    float:left;
}
.prechat-form-container .form-col-two {
    float:left;
    margin-left:10px;
}
.prechat-form-container .form-col {
    width:45%;
}
.prechat-form-container .form-row-btn {
    margin: 10px auto;
    text-align: center;
}
.prechat-form-container .form-spacer {
    float:left;
    margin:20px
}
.prechat-form-container .form-row-msg {
    clear:both;
}
.prechat-form-container .form-row-btn {
    margin:0 auto;
    width:150px;
    background-color:#0D091A;
    display:inline-block;
    text-align:center;
}
.prechat-form-container .form-row-btn div {
    float:left;
}
.prechat-form-container .form-row-btns {
    width: 480px;
    margin: 10px auto;
    cursor: pointer;
}
.prechat-form-container .form-row-btn span {
    color:white;
}
.prechat-form-container #textarea-your-question {
    
}


/* landing and post chat target pages */

.beauty-consultations {
    text-align:center;
    padding:25px;
    font-family:'OptimaDisplayLight';
}
.beauty-consultations .conditional-has-added-to-bag {
    display:none;
}
.beauty-consultations-headline {
    font-size:6em;
}
.beauty-consultations-large-msg {
    font-size:2.6em;
    width:666px;
    margin:0 auto;
}
.vba-tgt-pg-divider {
    border-bottom:1px solid lightgray;
    width:500px;
    margin:0 auto;
}
.beauty-consultations-lbl {
    font-size:1em;
    text-transform:uppercase;
    font-weight:bold;
}
.beauty-consultations-placement-msg {
    font-size:1.4em;
}

.beauty-consultations .btn-choices-row { width:345px;height:45px;margin:0px auto; }
.beauty-consultations .btn-choices-row .or-space { padding:10px; }
.beauty-consultations .btn-choices-row div { float:left; }

.beauty-consultations #order-question-btn,
.beauty-consultations #save-to-profile-btn,
.beauty-consultations #start-chat-btn,
.beauty-consultations #write-review-btn {
    margin:0 auto;
    width:150px;
    background-color:#0D091A;
    color:white;
}

.beauty-consultations-instructions a {
    text-decoration:underline;
}

/* */
.vba-btn {
    background-color:#0D091A;
    color:white;
    height: 38px;
    margin: 0 auto;
    cursor:pointer;
}
.vba-txt-btn {
    text-align:center;
    /* float:left; */
    width:175px;
    background-color:#0D091A;
    color:white;
    height: 32px;
    margin: 10px auto;
    padding-top: 10px;
    cursor:pointer;
}
.file-save-btn-row {
    float:none;
    clear:both;
    width:333px;
    position:relative;
    margin:0 auto;
}