﻿/*******************************************************************************
*  Top Bar
*******************************************************************************/
.top-bar-right .menu li a {
    transition: none;
}

#mobile-nav-continer .top-bar,
.site-header .top-bar {
    position: relative;
    z-index: 0;
    min-height: 52px;
    flex-wrap: nowrap;
    padding-right: 16px;
    box-shadow: 0 1px 5px #00000026;
}

#mobile-nav-continer .top-bar,
.site-header .top-bar {
    min-height: 52px;
}

.site-header .top-bar {
    padding: 0 10px;
}

#mobile-nav-continer .logo,
.site-header .logo {
    max-width: 180px;
}

@media (max-width: 590px) {
    #mobile-nav-continer .top-bar-right .menu [data-show-secondary="1"],
    .site-header .top-bar-right .menu [data-show-secondary="1"] {
        display: none;
    }
}

@media (min-width: 1050px) {
    #mobile-nav-continer .top-bar,
    .site-header .top-bar {
        min-height: 65px;
    }

    .site-header .top-bar {
        padding: 0 35px;
    }

    .site-header .logo {
        max-width: 215px;
    }

    .site-header .top-bar-left .menu a:hover {
        color: #275ab0;
        text-decoration: underline;
    }
}

#mobile-nav-continer .top-bar .top-bar-left,
#mobile-nav-continer .top-bar .top-bar-right,
.site-header .top-bar .top-bar-left,
.site-header .top-bar .top-bar-right {
    -ms-flex: unset;
    flex: unset;
    max-width: unset;
}

#mobile-nav-continer .top-bar ul,
#mobile-nav-continer .top-bar,
.site-header .top-bar ul,
.site-header .top-bar {
    background-color: #fff;
}

#mobile-nav-continer .top-bar-left,
#mobile-nav-continer .top-bar-right,
.site-header .top-bar-left,
.site-header .top-bar-right {
    min-width: 85px;
}

#mobile-nav-continer .menu,
#mobile-nav-continer .top-bar a,
.site-header .menu,
.site-header .top-bar a,
.site-header .top-bar a.blog-link {
    line-height: inherit;
    color: inherit;
}

.site-header .top-bar-left .menu li {
    display: inline-block;
}

.site-header .top-bar-left .menu a {
    padding: 7.5px 15px;
}

.site-header .top-bar-left .menu {
    transform: translateY(1px);
}

.site-header .top-bar-left .menu .shop-link {
    margin-right: 6px;
}

.site-header .top-bar-left .menu .about-link {
    margin-right: 5px;
}

.site-header .top-bar-right .menu .action {
    margin-left: 4px;
}

.site-header .action {
    padding: 10px;
}

.site-header .top-bar-right .menu .action {
    padding: 8px;
}

.site-header .top-bar-right .menu .action.search-toggle.active {
    padding: 5px 8px 10px;
}

.site-header .top-bar .visible-in-mobile-menu {
    display: none;
}

@media (min-width: 1050px) {
    .site-header .top-bar-right .menu .action {
        margin-left: 14px;
        padding: 8px;
    }

    .site-header .top-bar-right .menu .action {
        padding: 8px;
    }

    .site-header .top-bar-right .menu .action.search-toggle.active {
        padding: 6px 8px 10px;
    }
}

#mobile-nav-continer .top-bar-left,
.site-header .top-bar-left {
    font-family: 'Benton Sans Comp Bd';
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#mobile-nav-continer,
.site-header .top-bar-left {
    color: #00358E;
}

#mobile-nav-continer .burger-menu,
.site-header .burger-menu {
    display: flex;
    padding: 10px 8px 8px;
    transform: translateY(-2px);
}

#mobile-nav-continer > .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 19px;
}

#mobile-nav-continer > .menu li {
    width: 100%;
}

#mobile-nav-continer > .menu a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-family: 'Benton Sans Comp Med';
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: inherit;
}

#mobile-nav-continer .menu-ternary a,
#mobile-nav-continer > .menu a {
    padding: 16px 20px;
}

#mobile-nav-continer .menu-secondary a {
    padding: 8px 20px;
}


#mobile-nav-continer > .menu a::after {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("../image/circled-caret.svg");
}

.site-header .menu-ternary,
#mobile-nav-continer .menu-ternary,
#mobile-nav-continer .menu-secondary {
    margin: 0;
    list-style-type: none;
}

#mobile-nav-continer .menu-secondary {
    flex-grow: 1;
}

#mobile-nav-continer .menu-secondary a,
#mobile-nav-continer .menu-ternary a {
    font-family: 'Benton Sans Reg';
    display: flex;
    width: 100%;
    align-items: center;
    font-weight: 400;
}

#mobile-nav-continer .menu-secondary a {
    color: #000000;
    font-size: 18px;
    line-height: 26px;
}

#mobile-nav-continer .menu-ternary a {
    color: #707070;
    font-size: 12px;
    line-height: 18px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#mobile-nav-continer .menu-ternary {
    margin-bottom: 16px;
}

#mobile-nav-continer .menu-secondary .dr-icon {
    margin-right: .5rem;
}

#mobile-nav-continer .menu-separator {
    height: 1px;
    background-color: #E8E2D8;
    margin: 16px 20px;
}

.site-header .menu-ternary {
    display: none;
}

@media (min-width: 47.5em) {
    .site-header .top-bar-left,
    .site-header .top-bar-right {
        width: 33.33%;
    }
}

@media (min-width: 47.5em) and (max-width: 1100px) {
    .site-header .top-bar-left {
        font-size: 1.7vw;
    }

    .site-header .top-bar-left a {
        padding-left: .9vw;
        padding-right: .9vw;
    }
}

/*******************************************************************************
*  Search Block
*******************************************************************************/
.site-header .search-block {
    background-color: #fff;
    display: none;
    height: 52px;
    padding: 10px;
    padding-left: 20px;
    position: absolute;
    right: 0;
    top: 52px;
    width: 100%;
    z-index: 1;
    box-shadow: 0 10px 8px #00000040;
}

@media (min-width: 1050px) {
    .site-header .search-block {
        height: 65px;
    }

    .site-header .search-block .search-form {
        padding-left: 88px;
        max-width: 1348px;
        margin: 0 auto;
    }
}

.site-header .search-block .search-submit {
    background-color: #fff;
    color: #000;
    min-width: 23px;
    min-height: 23px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("../image/search.svg");
    width: unset;
    margin-top: 2px;
}

.site-header .search-block .search-field {
    border: unset;
    box-shadow: unset;
    background-color: #fff;
    font-family: 'Benton Sans Cond Reg';
    font-size: 20px;
    line-height: 24px;
    margin-top: 2px;
    margin-left: 12px;
}

.site-header .search-block .search-field::placeholder {
    color: #5f6369;
    font-style: normal;
    font-family: 'Benton Sans Cond Reg' !important;
}

.site-header .search-block .search-field:focus {
    outline-color: transparent;
}

.site-header .search-block.active {
    display: block;
}

.site-header .search-block .search-form,
.site-header .search-block label,
.site-header .search-block .search-field {
    height: 100%;
    width: 100%;
}

/*******************************************************************************
*  Live Agent Chat Overrides
*******************************************************************************/

/* Tab button */
.embeddedServiceHelpButton .helpButton .uiButton,
.embeddedServiceSidebarMinimizedDefaultUI,
button.startButton.uiButton--default.uiButton.embeddedServiceSidebarButton,
.embeddedServiceSidebarButton {
    background-color: #00358E !important;
}

.embeddedServiceHelpButton span.embeddedServiceIcon {
    margin-left: 15px;
}

span#helpButtonSpan {
    margin-right: 10px;
}

.embeddedServiceSidebar :focus {
    outline: none;
}

.embeddedServiceHelpButton .helpButton .uiButton:focus {
    outline: none !important;
}

.embeddedServiceLiveAgentStateChatItem .chatContent:focus {
    outline: none !important;
}

.embeddedServiceSidebarButton .label {
    font-family: 'Benton Sans Comp Bd';
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 20px;
    background: transparent;
}

.embeddedServiceHelpButton .helpButton .uiButton span.message,
.embeddedServiceSidebarMinimizedDefaultUI .minimizedText > .message {
    font-family: "Benton Sans Med" !important;
    text-transform: uppercase;
    font-size: 14px !important;
    line-height: 17px !important;
    text-decoration: none;
    letter-spacing: .1em;
}

button.startButton.uiButton--default.uiButton.embeddedServiceSidebarButton {
    border-radius: 10px;
    padding: 0;
}

.embeddedServiceSidebarButton .label, .embeddedServiceSidebarButton:disabled .label {
    padding: 12px;
}

/* Chat Window  */
.dockableContainer.showDockableContainer {
    border-radius: 0 !important;
    padding: 15px 10px;
    background: white;
    width: 425px !important;
}


h2[embeddedService-chatHeader_chatHeader] {
    color: #00358E !important;
    font-family: 'Benton Sans Comp Med';
    font-size: 28px !important;
    line-height: 32px;
    background-color: #FFF !important;
    letter-spacing: 0 !important;
    font-weight: 300 !important;
}

/* Chat form */
label.uiLabel-left.form-element__label.uiLabel span {
    font-family: 'Benton Sans Reg' !important;
    letter-spacing: .025em !important;
    color: #5F6369 !important;
    font-size: 12px !important;
}

label.uiLabel-left.form-element__label.uiLabel {
    margin-left: 0 !important;
}

.uiInput.uiInputEmail.uiInput--default.uiInput--input {
    margin-top: 20px;
    font-family: 'Benton Sans Cond Reg';
    font-size: 16px !important;
    line-height: 26px !important;
}

li.form-element__help {
    margin-top: -40px !important;
}

/* Loading Chat */
.featureBody.embeddedServiceSidebarFeature.embeddedServiceLiveAgentSidebarFeature {
    font-family: 'Benton Sans Cond Reg' !important;
}

/* Chat */
.chatSessionStartTime {
    text-align: left !important;
    padding-left: 25px !important;
    font-size: 16px !important;
    color: #5F6369 !important;
    line-height: 24px !important;
    margin-top: 20px !important;
}

.chasitorInputWrapper.dynamicResizeTextOneRow.text.embeddedServiceLiveAgentStateChatInputFooter {
    background: #FFF !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
    border: 1px solid #EAEAEA;
    font-size: 16px !important;
    color: #000 !important;
    padding: 12px !important;
    line-height: 24px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button__icon {
    fill: #eaeaea !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button__icon:focus,
.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button__icon:hover {
    fill: #00358e !important;
}

[embeddedservice-chatheader_chatheader-host] {
    background-color: #FFFFFF !important;
}

embeddedservice-chat-header svg.slds-icon-text-default {
    fill: #F0F0F0 !important;
}

lightning-primitive-icon {
    width: 20px;
    display: block;
}

.split-field-container span {
    font-family: 'Benton Sans Reg';
    font-size: 12px !important;
    color: #5F6369;
    letter-spacing: .025em;
}

.formContent.embeddedServiceSidebarForm input {
    height: 30px !important;
    border-color: #EAEAEA !important;
    border-width: 2px !important;
    border-radius: 5px !important;
    margin-bottom: 19px;
    font-family: 'Benton Sans Cond Reg' !important;
    font-size: 16px !important;
    line-height: 24px !important;
    padding-left: 10px;
}

/* Chat Bubbles */
.uiOutputRichText,
.embeddedServiceLiveAgentStateWaiting .waitingGreeting,
.embeddedServiceLiveAgentStateWaiting .waitingMessage {
    font-family: 'Benton Sans Cond Reg' !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.plaintextContent.chasitor.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI {
    background: #00358E !important;
    padding: 5px 10px;
}

.plaintextContent.agent.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI {
    background: #F0F0F0;
    font-family: 'Benton Sans Cond Reg';
    color: #5F6369 !important;
    line-height: 24px !important;
    font-size: 16px !important;
}

.embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0,
.avatar.iconAvatar.agentInitial.agentIconColor0 {
    background-color: #00358E !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items .slds-dropdown__item > a {
    color: #00358E !important;
}

.embeddedServiceLiveAgentStateChatItem .isLightningOutContext .avatar {
    bottom: 13px !important;
}

.embeddedServiceLiveAgentStateChat .messageArea:focus {
    border: none !important;
}

.embeddedServiceLiveAgentStateChatMenuMessage .rich-menu {
    margin-left: 40px !important;
    width: 275px !important;
}

button.rich-menu-item.embeddedServiceLiveAgentStateChatRichItem {
    height: 38px !important;
    line-height: 24px !important;
    padding: 9.5px !important;
}

button.rich-menu-item.embeddedServiceLiveAgentStateChatRichItem {
    color: #00358E !important;
}

button.rich-menu-itemOptionIsClicked.embeddedServiceLiveAgentStateChatRichItem {
    height: 40px;
}

button.endChatButton.saveTranscriptButton.uiButton--inverse.uiButton.embeddedServiceSidebarButton {
    background: transparent !important;
}

button.endChatButton.saveTranscriptButton.uiButton--inverse.uiButton.embeddedServiceSidebarButton span.label.bBody {
    background: white !important;
    color: #00358E !important;
    font-family: 'Benton Sans Cond Reg';
    text-transform: none;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: normal;
    letter-spacing: 0;
    text-decoration: underline;
    width: 200px !important;
    margin: 0 auto !important;
}

.embeddedServiceLiveAgentStateChatMenuMessage .rich-menu-item,
.embeddedServiceLiveAgentStateChatMenuMessage .rich-menu-itemOptionIsClicked {
    padding: 10px !important;
    font-family: 'Benton Sans Cond Reg' !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.agentName, .nameAndTimeDotDivider, .timeContent, .chatWindowCurrentDesc {
    font-family: 'Benton Sans Cond Reg';
    font-size: 12px !important;
    line-height: 24px !important;
}

.embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li {
    border-color: #F0F0F0 !important;
    border-width: 0 2px 2px 2px !important;
}

.embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li:first-of-type {
    border: 2px solid #F0F0F0 !important;
}

.embeddedServiceLiveAgentStateChatItem.chatMessage {
    padding: 0 30px;
}

.chatContent {
    margin-bottom: 20px;
    margin-top: 20px;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
    font-family: 'Benton Sans Cond Reg';
    font-size: 16px !important;
    line-height: 24px !important;
}

/* End Chat */
.embeddedServiceLiveAgentStateChat .endChatContainer .endChatButton {
    margin-top: 20px;
    margin-bottom: 5px !important;
}

button.endChatButton.closeChatButton.uiButton--default.uiButton.embeddedServiceSidebarButton {
    padding: 0;
    border-radius: 10px;
}

.embeddedServiceSidebarButton:focus {
    text-decoration: none !important;
}

/* Save transcript */
.embeddedServiceSidebarButton.uiButton--inverse .label {
    color: #FFF !important;
}

.embeddedServiceSidebarButton {
    border-radius: 10px !important;
}

img[embeddedService-chatHeader_chatHeader] {
    display: none !important;
}

.sidebarHeader[embeddedService-chatHeader_chatHeader] {
    padding: 30px !important;
    padding-left: 22px !important;
}

/* Mobile */
@media all and (max-width: 759px) {
    .inputSplitName.embeddedServiceSidebarFormField {
        width: 100% !important;
    }

    .dockableContainer.showDockableContainer,
    .embeddedServiceSidebar.layout-docked .dockableContainer,
    .dockableContainer.showDockableContainer {
        right: 0 !important;
    }

    .embeddedServiceSidebar.layout-docked .dockableContainer {
        max-width: 100% !important;
        height: 100% !important;
        margin-top: 0 !important;
        max-height: 550px !important;
    }

    .inputSplitName.embeddedServiceSidebarFormField {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .uiInput.uiInputEmail.uiInput--default.uiInput--input {
        margin-top: 0;
    }

    .embeddedServiceLiveAgentStateChatAction.uiButton svg {
        fill: #00358E !important;
    }

    .embeddedServiceLiveAgentStateChatAction .embeddedServiceIcon {
        left: 10px;
    }

    button.uiButton.helpButtonEnabled {
        border-radius: 10px 10px 0 0 !important;
        bottom: -2px !important;
        height: 40px !important;
        min-width: unset !important;
        width: 53px !important;
        position: fixed;
        right: 10px;
    }

    .embeddedServiceHelpButton .helpButton .uiButton,
    button.uiButton.helpButtonEnabled span.embeddedServiceIcon {
        margin-left: 7px;
    }

    button.uiButton.helpButtonEnabled span#helpButtonSpan {
        display: none;
        visibility: hidden;
    }

    button.uiButton.helpButtonEnabled span.embeddedServiceIcon {
        margin: 0 auto !important;

    }
}

/*******************************************************************************
*  Announcement
*******************************************************************************/
.announcement-container {
    position: relative;
    height: 40px;
    line-height: 40px;
    background: #00358e;
    border-bottom: 3px solid;
    -webkit-border-image: -webkit-linear-gradient(left, #963821 16%, #ce0058 29%, #fe5000 44%, #ffa400 61%, #74aa50 79%, #81b0d2 95%, #af95d3 100%) 1;
    border-image: linear-gradient(90deg, #963821 16%, #ce0058 29%, #fe5000 44%, #ffa400 61%, #74aa50 79%, #81b0d2 95%, #af95d3) 1;
    margin-bottom: 0;
    overflow: hidden;
    -webkit-transition: background .5s ease-in-out;
    transition: background .5s ease-in-out;
}

.announcement-container:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-linear-gradient(left, #963821 16%, #ce0058 29%, #fe5000 44%, #ffa400 61%, #74aa50 79%, #81b0d2 95%, #af95d3 100%);
    background: linear-gradient(90deg, #963821 16%, #ce0058 29%, #fe5000 44%, #ffa400 61%, #74aa50 79%, #81b0d2 95%, #af95d3);
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.announcement-container:hover:before {
    opacity: 1;
}

.announcement {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 29;
    transition: height .5s cubic-bezier(0, 0, .38, 1);
    overflow: hidden;
    color: #fff;
    font-family: Benton Sans Med;
}

.announcement .announcement__text {
    padding: 0;
    max-width: 80%;
    margin: auto;
    letter-spacing: 0;
    position: relative;
    font-family: Benton Sans Med;
    font-size: 13px
}

.announcement .announcement__link {
    color: #fff;
    font-family: Benton Sans Med;
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Benton Sans Med;
}

.announcement .announcement__link:hover {
    color: #fff;
}

.announcement .announcement__link > img {
    position: relative;
    top: -1px;
    height: 12px;
}

.announcement .announcement__link img + .announcement__text {
    margin-left: 4px;
}
