.ms_lcw_webchat_adaptive_card {
    border-style: solid;
    border-color: #e6e6e6;
    border-width: 1px
}

.ac-media-playButton-arrow {
    width: 0 !important;
    height: 0 !important;
    border: 15px solid transparent !important;
    border-left: 24px solid #000 !important;
    margin: 0 0 0 17px;
    transform: none !important
}


.oc-autofill .oclcw-chaticon-container {
    width: 62px;
    height: 62px;
    background-color: #007bff;
    border-radius: 50%;
    border: 1px solid transparent;
    margin: -2px 0 -2px -3px;
    position: relative
}

.oc-autofill .oclcw-chaticon {
    width: 32px;
    height: 32px;
    margin: 14px
}

.oc-autofill .oclcw-unread-messages-notification-bubble {
    background-color: #fa3e3e;
    border-radius: 50%;
    color: #fff;
    padding: 1px;
    font-family: Segoe UI;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    line-height: 22px;
    position: absolute;
    top: -4px;
    left: -4px;
    text-align: center;
    width: 24px;
    height: 24px
}

.oc-autofill .oclcw-unread-messages-notification-bubble-truncated {
    background-color: #fa3e3e;
    border-radius: 50%;
    color: #fff;
    padding: 1px;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    line-height: 22px;
    position: absolute;
    top: -4px;
    left: -4px;
    text-align: center;
    width: 24px;
    height: 24px
}

.oc-autofill .oclcw-page-container {
    z-index: 9999999;
    box-shadow: 0 0 7px 1px #ababab !important;
    width: 100%;
    height: 590px;
    position: fixed;
    right: 0;
    bottom: 0;
    border-radius: 4px
}

@media screen and (min-width:471px) and (min-height:601px) {
    .oc-autofill .web-chat-placeholder {
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0
    }
}

@media screen and (min-width:471px) and (max-height:600px) {
    .oc-autofill .web-chat-placeholder {
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0
    }
}

.oc-autofill .oclcw-page-container {
    z-index: 999999;
    box-shadow: 0 0 7px 1px #ababab;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    max-height: 100%;
    height: 100%
}

@media screen and (max-width:470px) {
    .oc-autofill .oclcw-page-container {
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 100vh;
        border-radius: 0;
        margin: 0
    }
}

@media only screen and (min-width:471px) and (min-height:601px) {
    .oc-autofill .oclcw-page-container {
        width: 100%;
        max-height: 100%
    }
}

@media only screen and (min-width:471px) and (max-height:600px) {
    .oc-autofill .oclcw-page-container {
        width: 100%;
        max-height: 100%
    }
}

.oc-autofill .webchat__stackedLayout__content div.webchat__row.message div.from-user {
    max-width: 85%
}

.oc-autofill .webchat__stackedLayout__content > .webchat__row > .bubble {
    max-width: 85%
}

.oc-autofill .web-chat-placeholder {
    min-width: 230px;
    position: fixed;
    border-radius: 4px;
    -moz-box-shadow: 0 0 1px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.12);
    box-shadow: 0 0 1px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.12);
    margin: 0
}

.oc-autofill .web-chat-close-conversation-confirm {
    z-index: 2147483647;
    padding: 10px 20px 10px 20px;
    position: absolute;
    left: 26px;
    right: 26px;
    top: calc(50% - 80px);
    min-height: 160px;
    max-height: 160px;
    background: #fff;
    border-radius: 2px;
    justify-content: center;
    display: flex
}


@media screen and (min-width:471px) and (max-height:600px) {
    @media screen and (orientation:landscape) {
        .inApp .web-chat-placeholder {
            width: calc(100%);
            height: calc(100%);
            right: 0;
            bottom: 0
        }
    }
}

@media screen and (max-width:470px) {
    .inApp .web-chat-placeholder {
        margin: 0 !important
    }

    .inApp .oclcw-page-container {
        width: 100%;
        height: 100%;
        margin: 0
    }

    .inApp .oclcw-actionBar {
        padding: 0 0 0 6px
    }

    .inApp .oclcw-actionBar-DownloadTranscript-icon-image {
        height: 20px;
        width: 20px
    }

    .inApp .oclcw-actionBar-DownloadTranscript-icon-container {
        margin-right: 16px
    }

    .inApp .oclcw-actionBar-EmailTranscript-icon-image {
        height: 20px;
        width: 20px
    }

    .inApp .oclcw-actionBar-active-header-inactive {
        height: calc(100% - 40px) !important
    }

    .inApp .oclcw-chatbutton {
        width: 140px;
        height: 46.5px;
        border-radius: 100px;
        position: relative;
        pointer-events: none;
        -moz-box-shadow: 0 0 4px rgba(102,102,102,.5);
        -webkit-box-shadow: 0 0 4px rgba(102,102,102,.5);
        box-shadow: 0 0 4px rgba(102,102,102,.5)
    }

    .inApp .oclcw-chaticon-container {
        width: 46.5px;
        height: 46.5px;
        border-radius: 50%;
        border: 1px solid transparent;
        margin: -1px 0 -2px -3px
    }

    .inApp .oclcw-chaticon {
        width: 24px;
        height: 24px;
        margin: 11.5px
    }

    .inApp .oclcw-chatbutton-title {
        margin-left: 0
    }

    .inApp .oclcw-t1 {
        font-weight: normal;
        color: #fff
    }

    .inApp .oclcw-t2 {
        display: none
    }
}

@media screen and (max-height:600px) {
    @media screen and (orientation:landscape) {
        .inApp .oclcw-page-container {
            width: calc(100%)
        }

            .inApp .oclcw-page-container.welcome-page {
                min-height: calc(100vh);
                margin-top: 0;
                position: fixed;
                right: 0;
                bottom: 0
            }
    }
}


.oclcw-incomingproactivechat-page-container {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 245px;
    min-height: 133px;
    height: auto;
    background: #fff;
    box-shadow: 0 0 4px rgba(102,102,102,.5);
    border-radius: 8px;
    z-index: 999999;
    margin: 3px
}

.oclcw-ipcp-welcomemessage-text {
    position: relative;
    display: inline-block;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 60px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 19px;
    color: #000;
    word-break: break-word;
    overflow: hidden
}

.oclcw-ipcp-accept-button {
    position: absolute;
    left: 16px;
    bottom: 16px;
    cursor: pointer;
    padding-left: 24px;
    padding-right: 23px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: #2266e3;
    border-radius: 40px;
    z-index: inherit
}

@media screen and (-ms-high-contrast:black-on-white) {
    .oclcw-ipcp-accept-button {
        border: 1px solid #000
    }

    .oclcw-incomingproactivechat-page-container {
        border: 1px solid #000
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .oclcw-ipcp-accept-button {
        border: 1px solid #fff
    }

    .oclcw-incomingproactivechat-page-container {
        border: 1px solid #fff
    }
}

.oclcw-ipcp-accept-button-text {
    height: 20px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    align-self: center;
    text-align: center;
    letter-spacing: .005em;
    color: #fff;
    z-index: inherit
}

.oclcw-ipcp-close {
    position: absolute;
    width: 13px;
    height: 14px;
    top: 12px;
    right: 12px;
    cursor: pointer;
    font-family: Full MDL2 Assets;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    letter-spacing: .005em;
    color: #605e5c;
    z-index: inherit;
    background-image: url("../images/closeChatButton.svg")
}

@media screen and (-ms-high-contrast:black-on-white) {
    .oclcw-ipcp-close {
        background-image: url("../images/HCW/closeChatButton_HCW.svg")
    }
}

.oclcw-ipcp-banner {
    background: url(../images/Proactive_banner.png) no-repeat #0742ab;
    width: inherit;
    height: 90px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.oclcw-ipcp-banner-text {
    position: absolute;
    left: 16px;
    top: 10px;
    right: 34px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #fff;
    text-align: left;
    margin-bottom: 0
}

.oclcw-ipcp-banner-text-row-1 {
    margin-bottom: 0
}

.oclcw-ipcp-banner-text-row-2 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600
}


#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window {
    bottom: 20px;
    right: 20px
}

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.hide_iframe {
        display: none
    }

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.minimize_iframe {
        height: 0;
        width: 0
    }

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.start_chat_button {
        height: 70px;
        width: 195px
    }

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.proactive_chat_panel {
        height: 100%;
        min-height: 214px;
        width: 255px
    }

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.web_chat_panel {
        height: 560px;
        width: 360px
    }

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.BottomRight {
        right: 20px;
        bottom: 20px
    }

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.BottomLeft {
        left: 20px;
        bottom: 20px
    }

@media screen and (max-height:600px) {
    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.web_chat_panel {
        height: calc(100vh - 40px)
    }
}

@media screen and (max-width:470px) {
    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.web_chat_panel.BottomLeft, #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.web_chat_panel.BottomRight {
        right: 0;
        left: 0;
        bottom: 0
    }

    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.web_chat_panel {
        height: 100%;
        width: 100%;
        right: 0;
        left: 0;
        bottom: 0
    }
}

@media screen and (max-height:600px) {
    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.inApp.web_chat_panel {
        height: calc(100vh - 40px)
    }

    @media screen and (orientation:landscape) {
        #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.inApp.web_chat_panel {
            height: calc(100vh);
            width: calc(100vw)
        }

        #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.inApp.BottomRight {
            right: 0;
            bottom: 0
        }
    }
}


#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.oc_autofill_iframe.web_chat_panel {
    height: 100%;
    width: 100%
}

#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.oc_autofill_iframe.BottomRight {
    right: 0;
    bottom: 0
}

@media screen and (max-height:600px) {
    #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window.oc_autofill_iframe.web_chat_panel {
        height: 100%
    }
}




#oclw-chat {
    z-index: 2147483647
}

.oclcw-debug-button {
    display: none;
    position: fixed;
    right: 20px;
    top: 20px;
    width: 150px;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    font-family: "Segoe UI",Arial,sans-serif;
    cursor: pointer;
    background-color: #222;
    color: #fff;
    z-index: 1000000;
    border-radius: 5px
}

.oclcw-debug-text {
    position: fixed;
    right: 20px;
    top: 80px;
    width: 346px;
    height: 200px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: "Segoe UI",Arial,sans-serif;
    border: 2px solid;
    border-radius: 5px;
    padding: 5px;
    overflow-y: auto
}

.oclcw-chatbutton {
    display: flex;
    width: 180px;
    height: 60px;
    border-radius: 100px;
    position: relative;
    background-color: #fff;
    border: 1px solid #fff;
    -moz-box-shadow: 0 0 4px rgba(102,102,102,.5);
    -webkit-box-shadow: 0 0 4px rgba(102,102,102,.5);
    box-shadow: 0 0 4px rgba(102,102,102,.5);
    margin: 3px
}

    .oclcw-chatbutton:hover, .loading-screen:hover {
        background-color: #f8f8f8
    }

    .oclcw-chatbutton:active, .loading-screen:active {
        background-color: #f4f4f4
    }

.oclcw-chaticon-container {
    width: 62px;
    height: 62px;
    background-color: #007bff;
    border-radius: 50%;
    border: 1px solid transparent;
    margin: -2px 0 -2px -3px;
    display: flex;
    align-items: center;
    justify-content: center
}

.oclcw-chaticon {
    max-width: 65%;
    max-height: 65%
}

.oclcw-chatbutton-title {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 14px;
    font-family: "Segoe UI",Arial,sans-serif;
    width: 85px
}

.oclcw-t1 {
    font-size: 16px;
    color: #262626;
    font-weight: bold;
    line-height: 19px;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis !important
}

.oclcw-t2 {
    font-size: 12px;
    color: #666;
    height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis !important
}

.oclcw-unread-messages-notification-bubble {
    background-color: #fa3e3e;
    border-radius: 50%;
    color: #fff;
    padding: 1px;
    font-family: Segoe UI;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    line-height: 22px;
    position: absolute;
    top: -5px;
    left: -6px;
    text-align: center;
    width: 24px;
    height: 24px
}

.oclcw-unread-messages-notification-bubble-truncated {
    background-color: #fa3e3e;
    border-radius: 50%;
    color: #fff;
    padding: 1px;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    line-height: 22px;
    position: absolute;
    top: -5px;
    left: -6px;
    text-align: center;
    width: 24px;
    height: 24px
}

.clear {
    clear: right
}

.loading-screen {
    width: 180px;
    height: 60px;
    border-radius: 100px;
    position: relative;
    background-color: #fff;
    -moz-box-shadow: 0 0 4px rgba(102,102,102,.5);
    -webkit-box-shadow: 0 0 4px rgba(102,102,102,.5);
    box-shadow: 0 0 4px rgba(102,102,102,.5);
    display: none
}

.loading-message {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    position: relative;
    color: #315fa2;
    top: 20px;
    left: 60px
}

.notification-icon {
    height: 24px;
    width: 24px;
    background-color: #d0021b;
    border-radius: 50%;
    display: none;
    text-align: center;
    visibility: hidden
}

.oclcw-page-container {
    z-index: 9999999;
    box-shadow: 0 0 7px 1px #ababab !important;
    width: 370px;
    height: 590px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 4px
}

.oclcw-visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    white-space: nowrap
}

@media screen and (min-width:471px) and (min-height:601px) {
    div.oclcw-emailTranscriptDialog-container {
        width: 360px
    }

    .web-chat-placeholder {
        width: 360px;
        height: 560px;
        right: 20px;
        bottom: 20px
    }

    .web-chat-header {
        border-radius: 4px 4px 0 0
    }
}

@media screen and (min-width:471px) and (max-height:600px) {
    div.oclcw-emailTranscriptDialog-container {
        width: 360px
    }

    .web-chat-placeholder {
        width: 360px;
        height: calc(100% - 40px);
        right: 20px;
        bottom: 20px
    }

    .web-chat-header {
        border-radius: 4px 4px 0 0
    }
}

@media screen and (max-width:470px) {
    .oclcw-actionBar {
        right: 0
    }

    div.oclcw-emailTranscriptDialog-container {
        width: 100%
    }

    .web-chat-placeholder {
        right: 0;
        left: 0;
        bottom: 0;
        top: 0
    }
}

@media screen and (max-height:470px) {
    .oclcw-actionBar {
        right: 0
    }

    div.oclcw-emailTranscriptDialog-container {
        width: 100%
    }
}

::-webkit-scrollbar {
    width: 7px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555
    }

::selection {
    background: #a3d9ff
}

.toolTipBase {
    display: inline-block;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    pointer-events: none;
    position: fixed;
    border: 1px solid;
    border-color: #000;
    padding: 4px 6px;
    background-color: #fff
}

.toolTipShow {
    opacity: .9;
    visibility: visible;
    pointer-events: initial
}

.toolTipPlace-top {
    bottom: 48px
}

.toolTipPlace-bottom {
    bottom: -48px
}

.toolTipPlace-left {
    left: -48px
}

.toolTipPlace-right {
    left: 48px
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}

.webchat__icon-button:focus svg {
    outline: #000 dotted 2px
}


.oclcw-page-container.operatinghour-page {
    background-color: #fff
}

.oclcw-operatinghour-page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.oclcw-oh-container {
    height: calc(100% - 40px)
}

.oclcw-operatinghour-page .oclcw-wp-close {
    display: none
}

.oclcw-oh-logo-alert-text {
    display: block;
    position: relative;
    top: 40%;
    text-align: center;
    word-break: break-word;
    margin: 0 2%
}

.oclcw-oh-alert-msg.t1 {
    font-size: 18px;
    line-height: 24px;
    left: 50.75%;
    right: 36.84%;
    top: 53.75%;
    bottom: 33.75%;
    font-family: Segoe UI;
    text-align: center;
    color: #605e5c
}

.oclcw-oh-alert-msg.t2 {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding-top: 24px
}

@media only screen and (max-width:470px) {
    @media screen and (max-height:320px) {
        .oclcw-oh-container {
            height: 100%;
            top: 0
        }

        .oclcw-operatinghour-page .oclcw-oh-container .oclcw-wp-loading {
            bottom: 10%
        }

        .oclcw-wp-sub-container {
            top: 10%;
            display: block;
            position: relative
        }
    }
}

@media only screen and (max-width:470px) {
    @media screen and (max-height:460px) and (min-height:321px) {
        .oclcw-oh-container {
            height: 100%
        }

        .oclcw-wp-sub-container {
            top: 15%;
            position: relative
        }

        .oclcw-operatinghour-page .oclcw-oh-container .oclcw-wp-loading {
            bottom: 15%
        }
    }
}

@media only screen and (min-width:471px) {
    @media screen and (max-height:500px) and (min-height:375px) {
        .oclcw-oh-container {
            top: 0;
            height: 100%
        }

        .oclcw-operatinghour-page .oclcw-oh-container .oclcw-wp-loading {
            display: inline-block;
            bottom: 12%
        }

        .oclcw-wp-sub-container {
            top: 12%;
            position: relative
        }
    }
}

@media only screen and (min-width:471px) {
    @media screen and (max-height:374px) {
        .oclcw-page-container.operatinghour-page {
            min-height: 385px;
            float: right;
            position: relative;
            right: 0;
            margin-top: 20px
        }

        .oclcw-wp-sub-container {
            top: 15%
        }

        .oclcw-wp-loading {
            bottom: 15%;
            display: inline-block
        }
    }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .oclcw-page-container {
        border: 1px solid #000
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .oclcw-page-container {
        border: 1px solid #fff
    }
}


.oclcw-page-container.postchat-load-page {
    background-color: #315fa2;
    border-radius: 4px
}

.oclcw-postchat-load-page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 4px
}

.oclcw-pcl-msg {
    display: block;
    margin: 0 auto;
    text-align: center;
    color: #f7f7f9
}

    .oclcw-pcl-msg.t1 {
        font-family: "Segoe UI",Arial,sans-serif;
        font-size: 16px;
        line-height: 19px;
        padding-top: 15px
    }

.oclcw-pcl-container {
    height: calc(100% - 40px)
}

.oclcw-pcl-sub-container {
    top: 30%;
    position: relative
}

.oclcw-postchat-load-page .oclcw-pcl-close {
    display: none
}

@media only screen and (max-width:470px) {
    @media screen and (max-height:320px) {
        .oclcw-pcl-container {
            height: 100%;
            top: 0
        }

        .oclcw-postchat-load-page .oclcw-pcl-container {
            bottom: 10%
        }

        .oclcw-pcl-sub-container {
            top: 10%;
            display: block;
            position: relative
        }
    }
}

@media only screen and (max-width:470px) {
    @media screen and (max-height:460px) and (min-height:321px) {
        .oclcw-pcl-container {
            height: 100%
        }

        .oclcw-pcl-sub-container {
            top: 5%;
            position: relative
        }

        .oclcw-postchat-load-page .oclcw-pcl-container {
            bottom: 15%
        }
    }
}

@media only screen and (min-width:471px) {
    @media screen and (max-height:500px) and (min-height:375px) {
        .oclcw-pcl-container {
            top: 0;
            height: 100%
        }

        .oclcw-postchat-load-page .oclcw-pcl-container {
            display: inline-block;
            bottom: 12%
        }

        .oclcw-pcl-sub-container {
            top: 5%;
            position: relative
        }
    }
}

@media only screen and (min-width:471px) {
    @media screen and (max-height:374px) {
        .oclcw-page-container.postchat-load-page {
            min-height: 385px;
            float: right;
            position: relative;
            right: 0;
            margin-top: 20px
        }

        .oclcw-pcl-sub-container {
            top: 5%
        }
    }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .oclcw-page-container {
        border: 1px solid #000
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .oclcw-page-container {
        border: 1px solid #fff
    }
}


*:focus {
    outline: #000 dotted 2px
}

.oclcw-page-container {
    z-index: 999999;
    box-shadow: 0 0 7px 1px #ababab;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    max-height: 590px;
    height: calc(100vh - 75px)
}

.oclcw-postchat-page, .oclcw-prechat-page {
    background-color: #fff;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px
}

.oclcw-pp-container {
    height: calc(100% - 25px)
}

[dir="ltr"] .oclcw-pp-minimize {
    margin-left: auto
}

[dir="rtl"] .oclcw-pp-minimize {
    margin-right: auto
}

.oclcw-pp-header {
    height: 60px;
    background-color: #315fa2;
    display: flex;
    border: 1px solid transparent;
    box-sizing: border-box
}

.oclcw-pp-postchat-main-container {
    position: relative;
    max-height: calc(100% - 50px);
    height: calc(100% - 50px)
}

.oclcw-pp-prechat-main-container {
    position: relative;
    overflow: auto;
    max-height: calc(100% - 50px)
}

.oclcw-pp-avatar-container {
    display: block;
    float: left;
    width: 34px;
    height: 34px;
    margin: 15px 13px 15px 15px
}

.oclcw-pp-avatar {
    height: 30px;
    width: 30px;
    float: left
}

    .oclcw-pp-avatar img {
        width: 100%;
        height: 100%
    }

.oclcw-pp-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    margin: 18px 0 18px 2px;
    float: left;
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #fff
}

.oclcw-pp-msg {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 18px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block
}

.oclcw-pp-postchatcontainer {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block
}

.oclcw-pp-prechatcontainer {
    width: 100%;
    margin: 0 auto;
    display: block;
    margin: 14px
}

.oclcw-card-container .card.adaptive {
    width: 90%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ebe9ea;
    padding: 0;
    display: block
}

html:not([dir="rtl"]) .oclcw-card-container .card.adaptive {
    border-top-left-radius: 0
}

[dir="rtl"] .oclcw-card-container .card.adaptive {
    border-top-right-radius: 0
}

.oclcw-card-container .card.adaptive > .ac-container {
    width: 330px
}

    .oclcw-card-container .card.adaptive > .ac-container > .ac-image {
        max-height: 153px !important;
        overflow: hidden
    }

.oclcw-card-container .card.adaptive input, .oclcw-card-container .card.adaptive p, .oclcw-card-container .card.adaptive h1, .oclcw-card-container .card.adaptive h2, .oclcw-card-container .card.adaptive h3, .oclcw-card-container .card.adaptive h4, .oclcw-card-container .card.adaptive h5, .oclcw-card-container .card.adaptive ul, .oclcw-card-container .card.adaptive li, .oclcw-card-container .card.adaptive ol, .oclcw-card-container .card.adaptive div, .oclcw-card-container .card.adaptive span, .oclcw-card-container .card.adaptive select, .oclcw-card-container .card.adaptive button {
    font-family: "Segoe UI",Arial,sans-serif;
    color: #2b2c33
}

.oclcw-card-container .card.adaptive p, .oclcw-card-container .card.adaptive h1, .oclcw-card-container .card.adaptive h2, .oclcw-card-container .card.adaptive h3, .oclcw-card-container .card.adaptive h4, .oclcw-card-container .card.adaptive h5, .oclcw-card-container .card.adaptive span, .oclcw-card-container .card.adaptive div {
    text-overflow: ellipsis
}

.oclcw-card-container .card.adaptive h1 {
    font-size: 50px;
    line-height: 59px
}

.oclcw-card-container .card.adaptive h2 {
    font-size: 26px;
    line-height: 32px
}

.oclcw-card-container .card.adaptive h3 {
    font-size: 18px;
    line-height: 24px
}

.oclcw-prechat-page .card.adaptive h4 {
    font-size: 18px;
    line-height: 21px
}

.oclcw-card-container .card.adaptive p, .oclcw-card-container .card.adaptive span {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -.3px
}

.oclcw-card-container .card.adaptive div {
    text-align: start !important
}

.oclcw-card-container .card.adaptive button {
    background-color: #f1f1f3;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 48px;
    font-weight: bold;
    font-size: 15px;
    border-radius: 0 0 10px 10px
}

.oclcw-card-container .card.adaptive .pushButton {
    background: #fff;
    border-color: #cae2eb;
    border-style: solid;
    border-radius: 25px;
    border-width: 1px;
    cursor: pointer;
    padding: 5px 10px
}

    .oclcw-card-container .card.adaptive .pushButton:hover {
        background: #afcfdb
    }

.oclcw-card-container .card.adaptive .container.selectable {
    padding: 5px
}

    .oclcw-card-container .card.adaptive .container.selectable:hover {
        background-color: rgba(0,0,0,.1)
    }

    .oclcw-card-container .card.adaptive .container.selectable:active {
        background-color: rgba(0,0,0,.15)
    }

.oclcw-card-container .card.adaptive .image.selectable {
    cursor: pointer
}

.oclcw-card-container .card.adaptive .image.person {
    border-radius: 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat
}

.oclcw-card-container .card.adaptive .factNameContainer {
    border-width: 0;
    padding: 0;
    border-style: none;
    min-width: 100px;
    vertical-align: top;
    white-space: nowrap
}

.oclcw-card-container .card.adaptive .factValueContainer {
    border-width: 0;
    padding: 0;
    border-style: none;
    vertical-align: top
}

html:not([dir="rtl"]) .oclcw-card-container .card.adaptive .factValueContainer {
    padding-left: 10px
}

[dir="rtl"] .oclcw-card-container .card.adaptive .factValueContainer {
    padding-right: 10px
}

.oclcw-card-container .card {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important
}

    .oclcw-card-container .card.adaptive .ac-container {
        width: auto !important;
        outline: none
    }

        .oclcw-card-container .card.adaptive .ac-container .ac-input {
            margin-bottom: 6px
        }

            .oclcw-card-container .card.adaptive .ac-container .ac-input.ac-multichoiceInput {
                padding: 3px;
                padding-top: 7px;
                padding-bottom: 7px
            }

            .oclcw-card-container .card.adaptive .ac-container .ac-input.ac-textInput {
                height: 40px;
                padding: 8px
            }

                .oclcw-card-container .card.adaptive .ac-container .ac-input.ac-textInput.ac-multiline {
                    height: 70px;
                    resize: none
                }

        .oclcw-card-container .card.adaptive .ac-container .ac-pushButton {
            color: #fff;
            background-color: #333;
            border-radius: 5px;
            border: 1px solid transparent;
            margin: 2px
        }

            .oclcw-card-container .card.adaptive .ac-container .ac-pushButton div {
                color: #fff
            }

            .oclcw-card-container .card.adaptive .ac-container .ac-pushButton:visited {
                background-color: #000
            }

            .oclcw-card-container .card.adaptive .ac-container .ac-pushButton:hover {
                background-color: #222
            }

    .oclcw-card-container .card.adaptive .button {
        color: #fff;
        background-color: #666;
        border-radius: 5px
    }

    .oclcw-card-container .card.adaptive .ac-container .ac-pushButton.disabled {
        background-color: #f1f1f3;
        cursor: not-allowed
    }

.oclcw-card-container .ac-input.error {
    border: 1px solid #a80000
}

.oclcw-card-container .oclcw-error-container {
    padding-top: 0;
    padding-bottom: 8px
}

    .oclcw-card-container .oclcw-error-container img {
        margin: auto;
        width: 12px;
        height: 12px;
        vertical-align: middle
    }

    .oclcw-card-container .oclcw-error-container .oclcw-error-text {
        padding: 0 8px;
        vertical-align: middle;
        font-family: Segoe UI !important;
        line-height: 16px !important;
        font-size: 12px !important;
        letter-spacing: .01em !important;
        color: #a80000 !important
    }

.oclcw-pp-header:after {
    content: "";
    border: 1px solid transparent;
    width: 100%;
    position: absolute;
    top: 48px;
    height: calc(100% - 48px);
    border-top: 0;
    left: 0
}

@media screen and (max-width:470px) {
    .oclcw-page-container {
        width: 98%;
        height: 98%;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 100vh;
        border-radius: 0;
        margin: 3px
    }
}

@media only screen and (min-width:471px) and (min-height:601px) {
    .oclcw-page-container {
        width: 360px;
        max-height: 560px
    }

    .oclcw-pp-postchat-main-container, .oclcw-pp-prechat-main-container {
        width: 100%;
        height: 100%;
        display: inline-block
    }

    .oclcw-pp-header {
        border-radius: 4px 4px 0 0
    }
}

@media only screen and (min-width:471px) and (max-height:600px) {
    .oclcw-page-container {
        width: 360px;
        max-height: calc(100% - 40px)
    }

    .oclcw-pp-header {
        border-radius: 4px 4px 0 0
    }
}

.oclcw-card-container fieldset, label {
    margin: 0;
    padding: 0
}

.oclcw-card-container .oclcw-pop-rating {
    border: none;
    float: left
}

    .oclcw-card-container .oclcw-pop-rating > input {
        display: none
    }

    .oclcw-card-container .oclcw-pop-rating > label:before {
        margin: 5px;
        font-size: 2.25em;
        font-family: Comic sans ms;
        content: "★"
    }

    .oclcw-card-container .oclcw-pop-rating > label {
        color: #ffe34c
    }

        .oclcw-card-container .oclcw-pop-rating > label:hover ~ label, .oclcw-card-container .oclcw-pop-rating input:checked ~ label, .oclcw-card-container .oclcw-pop-rating input:checked ~ label:hover ~ label {
            color: #ddd
        }

    .oclcw-card-container .oclcw-pop-rating input:checked + label {
        color: #ffe34c
    }

    .oclcw-card-container .oclcw-pop-rating input + label:hover {
        text-shadow: 0 0 1px #998100
    }


#chatRootReact[dir="rtl"] .web-chat-header-button-group {
    float: left
}

#chatRootReact[dir="rtl"] .web-chat-header-title, #chatRootReact[dir="rtl"] .web-chat-header-icon {
    float: right
}

#chatRootReact[dir="rtl"] .web-chat-header-closebutton {
    margin: 17px 0 17px 17px
}

#chatRootReact[dir="rtl"] .web-chat-header-minimizebutton {
    margin: 17px 0 17px 17px
}

#chatRootReact[dir="rtl"] .oclcw-chatbutton-title {
    margin-right: 14px
}

#chatRootReact[dir="rtl"] .web-chat-close-conversation-confirm-button-confirm {
    margin-left: 10px;
    margin-right: 0
}

#chatRootReact[dir="rtl"] #oclcw-actionBarIconsContainer div {
    float: right;
    margin-left: 6px;
    margin-right: 0
}

#chatRootReact[dir="rtl"] .oclcw-actionBar-AudioNotification-icon-container {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 6px !important
}

#chatRootReact[dir="rtl"] .oclcw-emailTranscriptDialog-actionButton_send {
    margin-left: 5px;
    margin-right: 0
}

#chatRootReact[dir="rtl"] .oclcw-emailTranscriptDialog-contentContainer p, #chatRootReact[dir="rtl"] .oclcw-emailTranscriptDialog-contentContainer h1 {
    text-align: right
}

#chatRootReact[dir="rtl"] .oclcw-ipcp-close {
    left: 12px;
    right: auto
}

#chatRootReact[dir="rtl"] .oclcw-ipcp-banner-text {
    left: 34px;
    right: 16px
}

#chatRootReact[dir="rtl"] .oclcw-ipcp-accept-button {
    left: auto;
    right: 16px
}

#chatRootReact[dir="rtl"] .oclcw-ipcp-banner-text-row-1, #chatRootReact[dir="rtl"] .oclcw-ipcp-banner-text-row-2 {
    text-align: right
}

#chatRootReact[dir="rtl"] .webchat__typingIndicator {
    margin-right: 10px;
    margin-left: 0
}

    #chatRootReact[dir="rtl"] .webchat__typingIndicator .bubble {
        margin-right: 0;
        margin-left: 2px
    }

        #chatRootReact[dir="rtl"] .webchat__typingIndicator .bubble:nth-child(3) {
            margin-right: 0;
            margin-left: 8px
        }

#chatRootReact[dir="rtl"] .webchat__fileContent__badge {
    text-align: right
}

#chatRootReact[dir="rtl"] .webchat__bubble__content svg {
    direction: rtl
}

#chatRootReact[dir="rtl"] .oclcw-web-chat-attachment-icon {
    padding: 0 8px 0 0
}


.calling-container {
    width: 100%;
    display: block;
    left: 0;
    overflow: hidden;
    position: relative
}

    .calling-container.videoCallDialog {
        height: 240px
    }

    .calling-container.voiceCallOrIncomingPopup {
        height: 60px
    }

    .calling-container.noCallDialog {
        height: 0
    }

.call-accept-button {
    height: 20px;
    width: 20px;
    margin: 10px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer;
    background-image: url("../images/callacceptbutton.svg")
}

.video-call-accept-button {
    height: 20px;
    width: 20px;
    margin: 10px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer;
    background-image: url("../images/videocallacceptbutton.svg")
}

.video-call-on-button {
    height: 20px;
    width: 20px;
    margin: 12px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer;
    background-image: url("../images/videoon.svg")
}

    .video-call-off-button:hover, .video-call-on-button:hover, .voice-call-off-button:hover, .voice-call-on-button:hover {
        padding: 12px 10px 10px 10px;
        margin: 0 0 0 0;
        background-color: #969696
    }

    .video-call-off-button:focus, .video-call-on-button:focus, .voice-call-off-button:focus, .voice-call-on-button:focus {
        outline: 2px dotted #fff
    }

.video-call-off-button {
    height: 20px;
    width: 20px;
    margin: 12px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer;
    background-image: url("../images/videooff.svg")
}

.microphone-button {
    height: 20px;
    width: 20px;
    margin: 12px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer
}

.voice-call-on-button {
    height: 20px;
    width: 20px;
    margin: 12px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer;
    background-image: url("../images/voiceoff.svg")
}

.voice-call-off-button {
    height: 20px;
    width: 20px;
    margin: 12px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer;
    background-image: url("../images/voiceon.svg")
}

.call-reject-button {
    height: 20px;
    width: 20px;
    margin: 10px 10px 10px 10px;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    z-index: 100;
    cursor: pointer;
    background-image: url("../images/callrejectbutton.svg")
}

@media screen and (-ms-high-contrast:black-on-white),(-ms-high-contrast:white-on-black) {
    .video-call-on-button, .video-call-off-button, .voice-call-on-button, .voice-call-off-button, .call-reject-button, .call-accept-button, .video-call-accept-button {
        padding: 12px 10px 10px 10px;
        margin: 0 1px 0 0;
        border: 1px solid
    }

        .video-call-on-button:hover, .video-call-off-button:hover, .voice-call-on-button:hover, .voice-call-off-button:hover {
            margin-right: 1px
        }

    #currentCall-footer {
        border-bottom: 1px solid
    }

        #currentCall-footer.withVideo {
            border-top: 1px solid
        }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .video-call-on-button {
        background-image: url("../images/HCW/videoon_HCW.svg")
    }

    .video-call-off-button {
        background-image: url("../images/HCW/videooff_HCW.svg")
    }

    .voice-call-on-button {
        background-image: url("../images/HCW/voiceoff_HCW.svg")
    }

    .voice-call-off-button {
        background-image: url("../images/HCW/voiceon_HCW.svg")
    }

    .call-reject-button {
        background-image: url("../images/HCW/callrejectbutton_HCW.svg")
    }

    .call-accept-button {
        background-image: url("../images/HCW/callacceptbutton_HCW.svg")
    }

    .video-call-accept-button {
        background-image: url("../images/HCW/videocallacceptbutton_HCW.svg")
    }
}

.redcircle {
    width: 40px;
    height: 40px;
    background: #f0491b;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    margin: 10px 5px 10px 5px;
    z-index: 100
}

.redbox {
    background: #f0491b;
    z-index: 100;
    align-items: center;
    max-height: 100%;
    max-width: 100%;
    border-radius: 0 2px 2px 0
}

.greencircle {
    width: 40px;
    height: 40px;
    background: #008000;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    margin: 10px 5px 10px 5px;
    z-index: 100
}

#currentCall-container.withoutVideo {
    display: flex;
    position: absolute;
    left: 0;
    height: 60px;
    width: 100%;
    overflow: hidden
}

#currentCall-container.withVideo {
    display: flex;
    position: absolute;
    left: 0;
    height: 240px;
    width: 100%;
    overflow: hidden
}

#currentCall-body.withoutVideo {
    display: flex;
    height: 0;
    width: 100%
}

#currentCall-body.withVideo {
    position: relative;
    display: flex;
    height: 180px;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto
}

#currentCall-footer.withoutVideo {
    display: flex;
    position: relative;
    left: 0;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: #292828;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1.2px 3.6px rgba(0,0,0,.12),0 6.4px 7.2px rgba(0,0,0,.1)
}

#incomingCallPopup.withoutVideo.incoming-call-popup {
    justify-content: space-between;
    padding: 1px 0
}

#currentCall-footer.withVideo {
    display: flex;
    height: 60px;
    position: relative;
    width: 100%;
    background-color: #292828;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1.2px 3.6px rgba(0,0,0,.12),0 6.4px 7.2px rgba(0,0,0,.1)
}

#currentCall-actionicons.withoutVideo {
    display: flex;
    background: #3d3c3c;
    box-shadow: 0 1.2px 3.6px rgba(0,0,0,.12),0 6.4px 7.2px rgba(0,0,0,.1);
    border-radius: 2px
}

#currentCall-actionicons.withVideo {
    display: flex;
    background: #3d3c3c;
    box-shadow: 0 1.2px 3.6px rgba(0,0,0,.12),0 6.4px 7.2px rgba(0,0,0,.1);
    border-radius: 2px
}

.voice-video-tooltip {
    top: 40px;
    bottom: auto;
    position: relative;
    width: max-content;
    left: 50%;
    transform: translateX(-50%)
}

.voice-call-off-button > .voice-video-tooltip, .video-call-off-button > .voice-video-tooltip, .video-call-on-button > .voice-video-tooltip, .voice-call-on-button > .voice-video-tooltip {
    top: 38px
}

#callAcceptButton > .voice-video-tooltip {
    transform: translateX(-75%)
}

.incoming-call-message {
    float: left;
    margin: 22px 0 22px 0;
    font-family: 'SegoeUI','Segoe UI';
    font-weight: 400;
    font-size: 13px;
    padding: 0 10px 0 10px;
    color: #fff
}

#selfVideo.hide {
    display: none
}

#remoteVideo.hide {
    display: none
}

#remoteVideo.show {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden
}

#selfVideo.maximize {
    display: flex;
    position: relative;
    left: 0;
    top: 0;
    height: auto;
    width: 100%;
    overflow: hidden
}

#selfVideo.minimize {
    display: flex;
    position: absolute;
    right: 8px;
    bottom: 8px;
    height: 60px;
    width: 80px;
    overflow: hidden;
    border-radius: 2px
}

    #remoteVideo.show video, #selfVideo.minimize video, #selfVideo.maximize video {
        height: 100%;
        width: 100%;
        object-fit: fill !important
    }

#remoteVideo.show div {
    width: 100%;
    height: 100%
}

.incoming-call-popup {
    height: 60px;
    width: 100%;
    position: relative;
    background: #292828
}

.incoming-call-button-group {
    float: right;
    display: flex
}

.call-container {
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #292828;
    position: relative
}

@media only screen and (max-width:570px) {
    @media screen and (max-height:420px) {
        #currentCall-body.withVideo {
            height: 100px
        }
    }
}

@media only screen and (max-width:470px) {
    @media screen and (max-height:320px) {
        #currentCall-body.withVideo {
            height: 80px
        }

        #currentCall-footer.withoutVideo, #currentCall-footer.withVideo {
            height: 20px
        }

        #selfVideo.minimize {
            height: 40px;
            width: 60px
        }

        #calling-container.videoCallDialog {
            height: 100px
        }

        .calling-container.voiceCallOrIncomingPopup {
            height: 40px
        }

        .video-call-off-button, .video-call-on-button, .voice-call-off-button, .voice-call-on-button, .redbox .call-reject-button {
            margin: 5px;
            height: 10px;
            width: 10px;
            background-size: 100%
        }

            .video-call-off-button:hover, .video-call-on-button:hover, .voice-call-off-button:hover, .voice-call-on-button:hover {
                padding: 5px
            }

            .voice-call-off-button > .voice-video-tooltip, .video-call-off-button > .voice-video-tooltip, #currentCall-actionicons > .redbox > .call-reject-button > .voice-video-tooltip {
                top: 15px
            }
    }
}

@media only screen and (max-width:370px) {
    @media screen and (max-height:220px) {
        #currentCall-body.withVideo {
            height: 60px
        }

        #calling-container.videoCallDialog {
            height: 70px
        }

        #incomingCallPopup.withoutVideo.incoming-call-popup {
            padding-top: 5px
        }

        #currentCall-footer.withoutVideo {
            height: 20px
        }
    }
}

@media screen and (orientation:portrait) and (min-width:321px) and (max-device-width:1024px) {
    #currentCall-body.withVideo {
        max-height: 200px;
        height: auto;
        overflow: hidden
    }

    #remoteVideo.show video, #selfVideo.minimize video, #selfVideo.maximize video {
        height: auto;
        width: 100%;
        object-fit: fill
    }

    #selfVideo.maximize {
        height: 100%
    }

    #selfVideo.minimize {
        height: 80px;
        width: 60px
    }
}

@media screen and (orientation:landscape) and (min-width:321px) and (max-device-width:1024px) {
    #currentCall-body.withVideo {
        max-height: 120px;
        height: auto;
        overflow: hidden
    }

    #remoteVideo.show video, #selfVideo.minimize video, #selfVideo.maximize video {
        height: auto;
        width: 100%;
        object-fit: fill
    }

    #selfVideo.maximize {
        height: 100%
    }
}


.main form > div > div {
    max-height: inherit;
    height: auto;
    word-wrap: break-word
}

.main > div > button {
    height: auto
}

.main form > div {
    height: auto
}

    .main form > div > textarea {
        overflow-x: hidden;
        overflow-y: auto
    }

.main > div > button > svg {
    margin-top: 3px
}

.main form.webchat__send-box-text-box {
    width: 100%;
    font-family: 'Segoe UI',Arial,sans-serif;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 10px;
    overflow: hidden;
    box-sizing: border-box
}

.web-chat > #web-chat-root-div > div > div > .main {
    padding: 5px 0;
    min-height: 60px;
    align-content: center;
    align-items: center
}

.webchat__bubble__content {
    font-size: 14px;
    min-height: 15px;
    line-height: 19px
}

    .webchat__bubble__content .markdown, .webchat__bubble__content .plain, .webchat__bubble__content > p {
        font-family: "Segoe UI",Arial,sans-serif;
        word-wrap: break-word
    }

.webchat__stackedLayout__content div.webchat__row.message div.from-user {
    max-width: 300px
}

.oclcw-web-chat-attachment-divider {
    margin: 0;
    border: 0;
    height: 1px;
    background-color: #e8eaec
}

#web-chat-root-div {
    height: 100%
}

.oclcw-web-chat-attachment {
    display: flex;
    align-items: center;
    background: transparent;
    font-size: 12px;
    line-height: 16px;
    box-sizing: border-box;
    border-radius: 2px;
    word-break: break-all
}

.oclcw-web-chat-attachment-icon {
    line-height: 0;
    padding: 0 0 0 8px
}

.oclcw-web-chat-attachment .webchat__fileContent {
    padding: 7px 10px 7px 4px;
    flex-grow: 1
}

.oclcw-web-chat-attachment .webchat__fileContent__fileName {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    min-height: 15px;
    line-height: 19px;
    margin-left: 5px;
    margin-right: 5px;
    color: #000 !important
}

.oclcw-web-chat-attachment .webchat__fileContent__downloadIcon {
    height: 12px;
    width: 12px;
    padding: 2px !important;
    margin-left: auto !important;
    fill: #000 !important
}

.webchat__stackedLayout__content .attachment .webchat__bubble__content img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%
}

.webchat__toaster {
    flex-shrink: 0;
    width: inherit
}

    .webchat__toaster[role="log"] {
        display: flex
    }

#web-chat-root-div .webchat__toaster .webchat__toaster__listItem:last-child {
    border-bottom: none
}

.webchat__toaster--error, .webchat__toaster--info, .webchat__toaster--success, .webchat__toaster--warn {
    border-bottom: 1px solid #e6e6e6
}

.oclcw-web-chat-attachment .webchat__fileContent__size {
    display: none
}

.oclcw-web-chat-system-message .webchat__stackedLayout__content [class^="css"]:not(.from-user).bubble {
    max-width: 100%
}

.oclcw-web-chat-system-message [class^="css"]:not(.from-user) > .webchat__bubble__content {
    color: #605e5c;
    background: transparent;
    font-size: 12px;
    border-radius: 0;
    min-height: auto;
    line-height: 16px
}

    .oclcw-web-chat-system-message [class^="css"]:not(.from-user) > .webchat__bubble__content > p {
        padding: 0
    }

.oclcw-web-chat-system-message > [class^="css"] > .content > .webchat__row > .bubble {
    max-width: 100%
}

    .oclcw-web-chat-system-message > [class^="css"] > .content > .webchat__row > .bubble > div > div {
        padding-left: 0
    }

.oclcw-web-chat-system-message .timestamp {
    display: none
}

.oclcw-web-chat-system-message .markdown {
    padding: 0;
    height: auto
}

.oclcw-web-chat-activityStatus-timestamp {
    padding: 2px
}

.oclcw-web-chat-activityStatus-timestampContent {
    color: #565452
}

    .oclcw-web-chat-activityStatus-timestampContent, .oclcw-web-chat-activityStatus-timestampContent > span, .oclcw-web-chat-activityStatus-timestampContent > span > span {
        font-family: "Segoe UI",Arial,sans-serif;
        background: transparent;
        font-size: 11px;
        line-height: 15px;
        padding-top: 0;
        color: #565452
    }

        .oclcw-web-chat-activityStatus-timestampContent .oclcw-web-chat-activityStatus-timestampFailed {
            color: #a80000
        }

        .oclcw-web-chat-activityStatus-timestampContent .oclcw-web-chat-activityStatus-timestampRetry {
            color: #0063b1;
            cursor: pointer
        }

.webchat__typingIndicator {
    margin-left: 10px;
    margin-bottom: 5px;
    display: flex;
    transition: all .5s ease;
    align-items: center
}

    .webchat__typingIndicator > div {
        font-family: "Segoe UI",Arial,sans-serif;
        background: transparent;
        font-size: 12px;
        line-height: 15px;
        color: #605e5c
    }

    .webchat__typingIndicator .bubble {
        height: 6px;
        width: 6px;
        border-radius: 6px;
        background: #2266e3;
        animation: bounce 2s ease infinite;
        margin-right: 2px
    }

        .webchat__typingIndicator .bubble:nth-child(2) {
            animation-delay: .166s
        }

        .webchat__typingIndicator .bubble:nth-child(3) {
            margin-right: 8px;
            animation-delay: .333s
        }

.ms_lcw_webchat_received_message a:link, .ms_lcw_webchat_received_message a:visited, .ms_lcw_webchat_received_message a:hover, .ms_lcw_webchat_received_message a:active {
    color: #fff
}

@keyframes bounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: .7
    }

    20% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        opacity: 1
    }

    40% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: .7
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.webchat__avatar {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    text-align: center
}

.webchat__avatar_initials {
    margin: 0;
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: #fff;
    padding-top: 7px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

button.ac-pushButton {
    cursor: pointer
}

.web-chat #web-chat-root-div div button.webchat__scrollToEndButton {
    height: 26px;
    width: 130px;
    border-radius: 3px;
    padding-top: 6px;
    font: 300 12px Arial;
    line-height: 14px;
    background-color: #3d3c3c;
    color: #fff;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    cursor: pointer
}

    .web-chat #web-chat-root-div div button.webchat__scrollToEndButton:hover {
        background-color: #767676
    }

@supports (-webkit-overflow-scrolling:touch)or(-webkit-touch-callout:none) {
    .main form {
        font-size: 16px;
    }
}

@media only screen and (max-width:470px) and (max-height:559px) {
    .web-chat > #web-chat-root-div > div > div > .main {
        min-height: 45px
    }

    .from-user.bubble > .webchat__bubble__content {
        min-height: 15px !important
    }

    .webchat__bubble__content .markdown {
        padding: 2px 5px
    }

    .main form {
        min-height: 0
    }

        .main form > div {
            max-height: 40px
        }
}


.web-chat-placeholder {
    min-width: 230px;
    position: fixed;
    border-radius: 4px;
    -moz-box-shadow: 0 0 1px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.12);
    box-shadow: 0 0 1px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.12);
    margin: 3px
}

.web-chat-dim-layer {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background-color: rgba(0,0,0,.3)
}

@media screen and (-ms-high-contrast:black-on-white) {
    .web-chat-placeholder {
        border: 1px solid #000
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .web-chat-placeholder {
        border: 1px solid #fff
    }
}

.web-chat-header {
    height: 50px;
    width: 100%;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.web-chat-header-button-group {
    margin: 0 0 0 15px;
    display: flex;
    flex-shrink: 0
}

.web-chat-header-closebutton, .web-chat-header-minimizebuttonwithcustomclosebutton, .web-chat-header-minimizebutton {
    height: 16px;
    width: 16px;
    margin: 17px 17px 17px 0;
    background: no-repeat;
    background-size: auto;
    background-position: center;
    cursor: pointer;
    background-image: url("../images/minimizeChatButton.svg")
}

.web-chat-header-customclosebutton {
    position: static;
    height: 24px;
    min-width: 50px;
    max-width: 120px;
    right: 0;
    top: 4px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
    margin: 12px 12px 12px 0;
    color: #323130;
    background-color: #fff;
    font-family: Segoe UI;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px #fff;
    padding: 2px 12px 2px 12px;
    flex: none;
    flex-grow: 0;
    order: 0
}

.web-chat-header-closebutton {
    margin-right: 15px;
    background-image: url("../images/closeChatButton.svg")
}

.web-chat-header-button-title {
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute
}

.web-chat-header-icon {
    height: 30px;
    width: 30px;
    flex-shrink: 0;
    margin: 0 15px;
    background: no-repeat;
    background-size: 30px;
    background-image: url("../images/chat.svg")
}

@media screen and (-ms-high-contrast:black-on-white) {
    .web-chat-header-minimizebutton {
        background-image: url("../images/HCW/minimizeChatButton_HCW.svg")
    }

    .web-chat-header-minimizebuttonwithcustomclosebutton {
        background-image: url("../images/HCW/minimizeChatButton_HCW.svg")
    }

    .web-chat-header-closebutton {
        background-image: url("../images/HCW/closeChatButton_HCW.svg")
    }

    .web-chat-header-icon {
        background-image: url("../images/HCW/chat_HCW.svg")
    }

    .web-chat-header {
        border-bottom: 1px solid #000
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .web-chat-header {
        border-bottom: 1px solid #fff
    }
}

.web-chat-header-title {
    padding: 5px 0;
    margin: 0;
    flex-grow: 1;
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.web-chat {
    display: block;
    border-radius: 4px
}

.web-chat-close-conversation-confirm {
    z-index: 2147483647;
    padding: 10px 20px 10px 20px;
    position: absolute;
    left: 26px;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    min-height: 160px;
    max-height: 300px;
    background: #fff;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto
}

.web-chat-close-conversation-confirm-content-container {
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px
}

.web-chat-close-conversation-confirm-title {
    width: 100%;
    font-size: 16px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 500;
    line-height: 20px;
    align-items: center;
    text-align: center;
    color: #323130
}

.web-chat-close-conversation-confirm-subtitle {
    width: 100%;
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    align-items: center;
    text-align: center;
    color: #605e5c
}

.web-chat-close-conversation-confirm-button-container {
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    left: 0;
    right: 0
}

.web-chat-close-conversation-confirm-button-confirm {
    height: 22px;
    border-radius: 2px;
    margin-right: 10px;
    cursor: pointer;
    color: #fff;
    min-width: 60px;
    max-width: 50%;
    padding: 6px 10px 4px 10px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    font-weight: 500
}

.web-chat-close-conversation-confirm-button-cancel {
    height: 22px;
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
    min-width: 60px;
    max-width: 50%;
    padding: 6px 10px 4px 10px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #8a8886
}

.oclcw-invalidEmail {
    color: #a4262c;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 12px;
    line-height: 16px;
    height: 16px;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 4px
}

.oclcw-actionBar-active-header-active {
    height: calc(100% - 80px)
}

.oclcw-actionBar-active-header-inactive {
    height: calc(100% - 30px)
}

.oclcw-actionBar-inactive-header-active {
    height: calc(100% - 50px)
}

.oclcw-actionBar-inactive-header-inactive {
    height: 100%
}

.oclcw-actionBar-EmailTranscript-icon-container {
    cursor: pointer;
    display: inline-block;
    margin-right: 6px;
    float: left
}

.oclcw-actionBar-EmailTranscript-icon-image {
    height: 14px;
    width: 14px;
    padding-top: 1px;
    cursor: pointer;
    display: block
}

.oclcw-emailTranscriptDialog-container {
    width: 360px;
    position: fixed;
    left: 0;
    min-height: 180px;
    bottom: 0;
    z-index: 2147483647;
    border-top: solid;
    border-top-width: 1px;
    border-color: rgba(138,141,145,.24);
    animation: .1s cubic-bezier(0,0,0,1) 0s 1 normal backwards running open-chat-anim;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.oclcw-emailTranscript-dialog {
    background: #fff;
    padding: 10px;
    margin: 0 3px 3px 3px
}

.oclcw-emailTranscriptDialog-closeButton-container {
    height: 40px;
    width: 30px;
    float: right;
    margin-right: 15px;
    margin-top: -13px
}

.oclcw-emailTranscriptDialog-closeButton {
    background: transparent;
    border: none
}

.oclcw-emailTranscriptDialog-closeButton-span {
    padding-top: 5px;
    cursor: pointer
}

.oclcw-emailTranscriptDialog-title {
    text-align: left;
    margin-bottom: 11px;
    margin-top: 11px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 18px;
    font-weight: 500
}

.oclcw-emailTranscriptDialog-textContent {
    color: #262626;
    text-align: left;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 13px;
    margin-top: 12px
}

.oclcw-emailTranscriptDialog-textField-container {
    margin-top: 5px;
    margin-bottom: 5px
}

.oclcw-emailTranscriptDialog-textField {
    width: 100%;
    height: 40px;
    text-indent: 10px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box
}

.oclcw-emailTranscriptDialog-actionButton_send {
    background-color: #f3f2f1;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 21px;
    color: #a19f9d;
    border-width: 0;
    width: 80px;
    height: 32px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media screen and (-ms-high-contrast:black-on-white) {
    .oclcw-emailTranscriptDialog-actionButton_send {
        border: 2px solid #000
    }

    .web-chat-close-conversation-confirm-button-confirm {
        border: 1px solid #000
    }

    .web-chat-header-customclosebutton {
        border: 1px solid #000
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .oclcw-emailTranscriptDialog-actionButton_send {
        border: 2px solid #fff
    }

    .web-chat-close-conversation-confirm-button-confirm {
        border: 1px solid #fff
    }

    .web-chat-header-customclosebutton {
        border: 1px solid #fff
    }
}

.oclcw-emailTranscriptDialog-actionButton_cancel {
    position: absolute;
    background-color: #fff;
    cursor: pointer;
    margin-left: 5px;
    margin-top: 21px;
    color: #000;
    border: solid;
    border-width: 2px;
    box-sizing: border-box;
    border-color: #e0e3e6;
    width: 80px;
    height: 32px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.oclcw-actionBar {
    background-color: #fff;
    position: relative;
    z-index: 10;
    width: calc(100% - 20px);
    min-height: 25px;
    padding: 5px 10px 0 10px;
    border-radius: 0 0 4px 4px;
    animation-duration: .46s;
    animation-timing-function: cubic-bezier(0,0,0,1);
    animation-delay: .2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: backwards;
    animation-play-state: running;
    animation-name: open-chat-anim
}

.oclcw-actionBar-AudioNotification-icon-container {
    cursor: pointer;
    display: inline-block;
    margin-right: 6px;
    float: right
}

.oclcw-actionBar-AudioNotification-icon-button {
    border: none;
    background-color: transparent;
    padding: 3.5px;
    cursor: pointer
}

.oclcw-actionBar-AudioNotification-icon-image {
    height: 14px;
    width: 14px;
    padding-top: 1px;
    cursor: pointer;
    display: block
}

.oclcw-actionBar-DownloadTranscript-icon-container {
    cursor: pointer;
    display: inline-block;
    margin-right: 6px;
    float: left
}

.oclcw-actionBar-DownloadTranscript-icon-image {
    height: 14px;
    width: 14px;
    padding-top: 1px;
    cursor: pointer;
    display: block
}

.oclcw-actionBar-DownloadTranscript-icon-button {
    border: none;
    background-color: transparent;
    padding: 3.5px;
    cursor: pointer
}

.oclcw-actionBar-EmailTranscript-icon-button {
    border: none;
    background-color: transparent;
    padding: 3.5px;
    cursor: pointer
}

    .oclcw-actionBar-EmailTranscript-icon-button:hover {
        background: #e1dfdd;
        border-radius: 2px
    }

.oclcw-actionBar-DownloadTranscript-icon-button:hover {
    background: #e1dfdd;
    border-radius: 2px
}

.oclcw-queuePosition-pane {
    position: absolute;
    bottom: 98px;
    border-color: #000;
    display: inline-grid;
    background: #fff;
    padding: 18px;
    width: -webkit-fill-available;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400
}

    .oclcw-queuePosition-pane span {
        color: #605e5c
    }

.oclcw-queuePosition-pane-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 500
}

@media screen and (max-width:354px) and (max-height:559px) {
    .web-chat-header {
        display: flex;
        align-items: center;
        align-content: center;
        height: 30px
    }

    .web-chat-header-icon {
        height: 25px;
        width: 25px;
        margin: 0 10px;
        background-size: 25px
    }

    .web-chat-header-title {
        margin: 0;
        flex: 1 0 auto
    }

    .oclcw-actionBar {
        min-height: 18px
    }

    .oclcw-actionBar-DownloadTranscript-icon-button {
        padding: 0 3.5px
    }

    .oclcw-actionBar-active-header-active {
        height: calc(100% - 53px)
    }
}

@media only screen and (max-width:570px) {
    @media screen and (max-height:420px) {
        .oclcw-actionBar-active-header-active {
            height: calc(100% - 80px)
        }

        .oclcw-actionBar-inactive-header-active {
            height: calc(100% - 50px)
        }
    }
}

@media only screen and (max-width:370px) {
    @media screen and (max-height:220px) {
        .oclcw-actionBar {
            Padding: 0 10px 0 10px
        }

        .oclcw-actionBar-active-header-active {
            height: 70px
        }

        .oclcw-actionBar-inactive-header-active {
            height: 90px
        }

        .web-chat-header-icon {
            height: 15px;
            width: 15px;
            background-size: 15px;
            margin: 7px 15px 10px 15px
        }

        .web-chat-header-title {
            margin: 2px 0 0 0
        }

        .web-chat-header-minimizebutton {
            margin: 5px 17px 8px 0
        }

        .web-chat-header-closebutton {
            margin: 5px 17px 8px 0
        }

        .oclcw-web-chat-system-message {
            padding-top: 10px
        }

        .web-chat-header {
            height: 20%
        }
    }
}


.oclcw-page-container.welcome-page {
    background-color: #315fa2;
    border-radius: 4px
}

.oclcw-welcome-page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 4px
}

.oclcw-wp-logo {
    width: 96px;
    height: 96px;
    border: 8px solid rgba(196,196,196,.15);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto
}

.oclcw-wp-logo-inset {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    align-items: center
}

.oclcw-wp-logo img {
    max-width: 64px;
    max-height: 64px;
    margin: auto
}

.oclcw-wp-msg, .oclcw-wp-alert-msg {
    display: block;
    margin: 0 auto;
    text-align: center;
    color: #f7f7f9
}

    .oclcw-wp-msg.t1 {
        font-family: "Segoe UI",Arial,sans-serif;
        font-size: 14px;
        line-height: 19px;
        padding-top: 15px
    }

    .oclcw-wp-msg.t2 {
        font-family: "Segoe UI",Arial,sans-serif;
        font-size: 18px;
        line-height: 24px;
        padding-top: 7px
    }

    .oclcw-wp-msg.t3 {
        color: #d8d8d8;
        font-family: "Segoe UI",Arial,sans-serif;
        font-size: 12px;
        line-height: 16px;
        top: calc(20% + 11px);
        position: relative
    }

.oclcw-wp-container {
    height: calc(100% - 40px)
}

.oclcw-wp-sub-container {
    top: 20%;
    position: relative
}

.oclcw-wp-loading {
    position: absolute;
    bottom: 20%;
    width: 100%;
    display: inline-block
}

    .oclcw-wp-loading img {
        width: 42px;
        height: 42px;
        margin: auto;
        display: block
    }

.oclcw-wp-logo-alert-text {
    display: none
}

.oclcw-wp-alert-msg.t1 {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 18px;
    line-height: 21px;
    padding-top: 15px
}

.oclcw-wp-alert-msg.t2 {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding-top: 24px
}

.oclcw-welcome-page .oclcw-wp-close {
    display: none
}

@media only screen and (max-width:470px) {
    @media screen and (max-height:320px) {
        .oclcw-wp-container {
            height: 100%;
            top: 0
        }

        .oclcw-welcome-page .oclcw-wp-container .oclcw-wp-loading {
            bottom: 10%
        }

        .oclcw-wp-sub-container {
            top: 10%;
            display: block;
            position: relative
        }
    }
}

@media only screen and (max-width:470px) {
    @media screen and (max-height:460px) and (min-height:321px) {
        .oclcw-wp-container {
            height: 100%
        }

        .oclcw-wp-sub-container {
            top: 5%;
            position: relative
        }

        .oclcw-welcome-page .oclcw-wp-container .oclcw-wp-loading {
            bottom: 15%
        }
    }
}

@media only screen and (min-width:471px) {
    @media screen and (max-height:500px) and (min-height:375px) {
        .oclcw-wp-container {
            top: 0;
            height: 100%
        }

        .oclcw-welcome-page .oclcw-wp-container .oclcw-wp-loading {
            display: inline-block;
            bottom: 12%
        }

        .oclcw-wp-sub-container {
            top: 5%;
            position: relative
        }
    }
}

@media only screen and (min-width:471px) {
    @media screen and (max-height:374px) {
        .oclcw-page-container.welcome-page {
            min-height: 385px;
            float: right;
            position: relative;
            right: 0;
            margin-top: 20px
        }

        .oclcw-wp-sub-container {
            top: 5%
        }

        .oclcw-wp-loading {
            bottom: 15%;
            display: inline-block
        }
    }
}

@media screen and (max-height:374px) {
    .oclcw-wp-loading {
        bottom: 5%;
        display: inline-block
    }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .oclcw-page-container {
        border: 1px solid #000
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .oclcw-page-container {
        border: 1px solid #fff
    }
}