/* ----------------------------------------------------------------------------------
  Fonts
---------------------------------------------------------------------------------- */
@font-face {
  font-family: 'HEINEKENCore-Bold';
  src: url('/fonts/HEINEKENCore-Bold.eot');
  src: url('/fonts/HEINEKENCore-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/HEINEKENCore-Bold.woff') format('woff'),
    url('/fonts/HEINEKENCore-Bold.ttf') format('truetype'),
    url('/fonts/HEINEKENCore-Bold.otf') format('otf');
} 
@font-face {
  font-family: 'HEINEKENCore';
  src: url('/fonts/HEINEKENCore.eot');
  src: url('/fonts/HEINEKENCore.eot?#iefix') format('embedded-opentype'),
    url('/fonts/HEINEKENCore.woff') format('woff'),
    url('/fonts/HEINEKENCore.ttf') format('truetype'),
    url('/fonts/HEINEKENCore.otf') format('otf');
}

#hnkcb-container {
    font-family: "HEINEKENCore","Helvetica Neue",Arial,sans-serif
}


/* ----------------------------------------------------------------------------------
  Conversation Objects
---------------------------------------------------------------------------------- */

/* Messages */
#hnkcb-chat-window .webchat__bubble__content {
    border: none;
    color: #738192;
    box-shadow: 0 -1px 12px 0 rgb(0 0 0 / 10%);
}

#hnkcb-chat-window .webchat__bubble__content p {
    padding: 10px 15px 8px;
    margin-bottom: 0;
}

#hnkcb-chat-window .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    border-radius: 18px 18px 18px 2px;
    background: white
}
#hnkcb-chat-window .webchat__bubble--from-user .webchat__bubble__content {
    border-radius: 18px 18px 2px 18px;
    background: rgb(0, 85, 30);
    color: white;
}
#hnkcb-chat-window .webchat__bubble__content {
    padding: 0px;
    font-size: 15px;
}
#hnkcb-chat-window .webchat__bubble__content .webchat__adaptive-card-renderer > .ac-container {
    padding: 15px !important;
}
#hnkcb-chat-window .webchat__bubble__content .ac-container .ac-textBlock {
    color: #738192 !important;
    font-size: 15px !important;
}
#hnkcb-chat-window .webchat__stacked-layout__content {
    overflow: initial;
}

#hnkcb-chat-window .webchat__stacked-layout__message {
    overflow: initial;
}
#hnkcb-chat-window .webchat__fileContent__fileName {
    color: #738192;
}

#hnkcb-chat-window .webchat__stacked-layout--from-user .webchat__stacked-layout__status {
    margin-right: 5px;
}

/* Avatars */
#hnkcb-chat-window .webchat__stacked-layout__avatar-gutter {
    width: 50px;
}
#hnkcb-chat-window .webchat__stacked-layout__main .webchat__stacked-layout__avatar-gutter {
    width: 40px;
    margin-right: 5px;    
    background: url('/Content/assets/ChatBotNav/logo.png') center center no-repeat;
    background-size: contain;
}
#hnkcb-chat-window .webchat__imageAvatar, #hnkcb-chat-window .webchat__defaultAvatar {
    width: 45px !important;
    height: 45px !important;
}
#hnkcb-chat-window .webchat__imageAvatar__image {
    background-color: #D8E2F0;
}
#hnkcb-chat-window .webchat__defaultAvatar--fromUser .webchat__imageAvatar__image {
    background-color: rgb(0, 85, 30);
}
#hnkcb-chat-window .webchat__stacked-layout--from-user .webchat__stacked-layout__avatar-gutter {
    width: 0;
    background: none !important;
}
#hnkcb-chat-window .webchat__imageAvatar__image img {
    height: 24px !important;
    width: 22px !important;
}
#hnkcb-chat-window .webchat__initialsAvatar {
    display: none
}

/* Buttons */
#hnkcb-chat-window .webchat__bubble__content .ac-pushButton {
    border: 1px solid #C3C3C3;
    border-radius: 5px;
    color: #383838;
    height: 48px;
    padding: 0 10px;
    font-size: 13px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;    
}
#hnkcb-chat-window .webchat__bubble__content .ac-pushButton:hover {
    color: #FFFFFF;
    background-color: #13670B
}


/* ----------------------------------------------------------------------------------
  Suggested Actions
---------------------------------------------------------------------------------- */
#hnkcb-chat-window .webchat__suggested-action button {
    color: #13670B;
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;    
    background-color: #CFE0CE;
    height: 39px;
    border-radius: 100px;
    border: none;
    font-weight: bold;
}
#hnkcb-chat-window .webchat__suggested-action button:hover {
    color: #FFFFFF;
    background-color: #13670B
}
#hnkcb-chat-window .slider {
    cursor: pointer
}


/* ----------------------------------------------------------------------------------
  Message Form
---------------------------------------------------------------------------------- */
#hnkcb-chat-window .main {
    border: none;
    border-radius: 0;
    background-color: #FFF;
    margin: 0;
    height: 57px;
    display: flex;
    box-shadow: 0 -1px 12px 0 rgb(0 0 0 / 10%);
}

/* Attachment Button */
#hnkcb-chat-window .main > div:first-of-type:not(:only-of-type) {
    min-width: 40px;
    background-color: transparent;
    border: none;
    height: 100%;
    padding: 0;    
}
#hnkcb-chat-window .main > div:first-of-type:not(:only-of-type) button {
    cursor: pointer;
}

/* Text Box */
#hnkcb-chat-window .main>form {
    flex-grow: 1;
    overflow: hidden;
    padding: 20px 10px;
}
#hnkcb-chat-window .main>form input {
    background-color: transparent
}

/* submit button */
#hnkcb-chat-window .main>form+div button {
    min-width: 43px;
    width: 46px;
    height: 100%;    
    margin: 0px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    background-image: url("/Content/assets/ChatBotNav/send-icon.png");
    background-repeat: no-repeat;
    background-position: center;
    filter: saturate(0) brightness(80%);
}
#hnkcb-chat-window .main>form+div button:hover {
    /* background-color: #13670B */
}
#hnkcb-chat-window .main>form+div button svg {
    display: none !important
}


/* ----------------------------------------------------------------------------------
  Container
---------------------------------------------------------------------------------- */
#hnkcb-container {
    display: flex;
    flex-flow: column;
	z-index: 9998
}
#hnkcb-container.hnkcb-fill {
    width: 100%;
    height: 100%
}
@media only screen and (min-width: 600px) {
    #hnkcb-container:not(.hnkcb-fill) {
        height:75%;
        width: 500px;
        position: fixed;
        bottom: 80px;
        right: 50px;
        box-shadow: 0 0 12px rgba(0,0,0,0.15)
    }
}
@media only screen and (max-width: 599px) {
    #hnkcb-container:not(.hnkcb-fill) {
        position:fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }
}


/* ----------------------------------------------------------------------------------
  Header
---------------------------------------------------------------------------------- */
#hnkcb-header {
    position: relative;
    background-color: rgb(0, 85, 30);
    box-shadow: 0px 3px 6px rgba(0,0,0,0.160784);
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
    display: flex;
	height: 53px;
    align-items: center;
}

#hnkcb-avatar {
    background: url('/Content/assets/ChatBotNav/logo.png') center center no-repeat;
    width: 45px;
    height: 40px;
    background-size: contain;
    margin-left: 20px;
}

#hnkcb-menu {
    width: 20px;
    height: 17px;
    position: absolute;
    left: 15px;
    top: 20px;
    cursor: pointer;
    display: none
}
#hnkcb-title {
    font-family: "HEINEKENCore";
    width: 100%;
    padding: 20px;
    font-size: 18px;
    color: #FFF;
}
#hnkcb-close:after {
    content: url('/Content/assets/ChatBotNav/close-icon.png');
    /* position: absolute;
    right: 15px;
    top: 15px; */
    font-weight: 900;
    cursor: pointer;
    margin-right: 20px;
}


/* ----------------------------------------------------------------------------------
  Chat Window
---------------------------------------------------------------------------------- */
#hnkcb-chat-container {
    position: relative;
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    height: 100%
}
#hnkcb-chat-window {
    height: 100%;
    width: 100%;
    background-color: #fff;
}
@media only screen and (min-width: 600px) {
    #hnkcb-chat-window {
        border-radius:0 0 4px 4px;
    }
}
#hnkcb-chat-window>div {
    background: rgb(250, 249, 248);
}


/* ----------------------------------------------------------------------------------
  Launch Button & Visibility Toggle
---------------------------------------------------------------------------------- */
#hnkcb-launch {
    z-index: 2;
    position: fixed;
    top: 50%;
    right: 0;
    bottom: 70px;
    width: 48px;
    height: 48px;
    border-radius: 0%;
    cursor: pointer;
    background-color: rgb(0, 85, 30);
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjQ4cHgiIGhlaWdodD0iNDhweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDggKDQ3MjM1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8dGl0bGU+QkxpUDwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iQkxpUCIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj4NCiAgICAgICAgICAgIDxnIGlkPSJicmFuZC1sb2dvLSgxKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOS4wMDAwMDAsIDkuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLjE3MTAzMjQsMCBDOC41MDMxMTkzNCwwIDUuNzM4MTQ3MTksMC40MTkwNDc2MTggMy44NTM5ODY3LDEuNTU4MzMzMzMgQzAuNzk3ODM3MTI3LDMuNDA0NzYxOSAtMC4wOTYzMjAxNzAyLDcuMDEwNzE0MjkgMC4wMDgwMTg0MDE2NiwxMC4zMzA5NTI0IEMwLjA5Nzc5ODEwMzIsMTMuMjAyMzgxIDAuODgyNzYzODcsMTYuMjg1NzE0MyAyLjk2ODMyMjA2LDE4LjQwNzE0MjkgQzQuOTU4MDM0MzgsMjAuNDI5NzYxOSA5LjA0OTA3Njk4LDIxLjMzOTI4NTcgMTEuODM4MzEzOSwyMS4zMzkyODU3IEMxMS45NjQ0OTA4LDIxLjMzOTI4NTcgMTIuMDk3OTQ3MSwyMS40Mjg1NzE0IDEyLjA5Nzk0NzEsMjEuNTk0MDQ3NiBMMTIuMDk3OTQ3MSwyNC40OTE2NjY3IEMxMi4wOTc5NDcxLDI0Ljc3NzM4MSAxMi4zMjQ4MjI4LDI1IDEyLjYxNjAwMDIsMjUgQzEyLjYzMjk4NTYsMjUgMTIuNjQ4NzU3NywyNC45OTY0Mjg2IDEyLjY2NDUyOTgsMjQuOTk1MjM4MSBDMTIuNzc0OTM0NiwyNC45ODU3MTQzIDEyLjg3MTk5MzcsMjQuOTQ1MjM4MSAxMi45NDk2NDEsMjQuODgyMTQyOSBDMTQuMzU1Nzg1MywyMy43MDM1NzE0IDE1Ljc2MDcxNjMsMjIuNTAzNTcxNCAxNy4xMTcxMTc3LDIxLjI3MDIzODEgQzE4LjQxNzcxMDEsMjAuMDg2OTA0OCAxOS44OTA1ODI1LDE4Ljg3MTQyODYgMjAuOTA3Mjc3LDE3LjQ1NDc2MTkgQzIzLjA1MjI4MzksMTQuNDY2NjY2NyAyMy4zNzAxNTI2LDEwLjI0MTY2NjcgMjIuNjU5MTk0NCw2LjczOTI4NTcxIEMyMS45NzQ5Mjc1LDMuMzY5MDQ3NjEgMTkuNTM1MTAzNSwxLjE3NSAxNi4xMTQ5ODIxLDAuNDc2MTkwNDc1IEMxNC43MDc2MjQ3LDAuMTg5Mjg1NzE0IDEyLjk2MTc3MzQsMCAxMS4xNzEwMzI0LDAgTTExLjE3MTAzMjQsMS4yMTMwOTUyNCBDMTIuNzczNzIxMywxLjIxMzA5NTI0IDE0LjQzOTQ5ODgsMS4zNzI2MTkwNSAxNS44NjM4NDE2LDEuNjYzMDk1MjQgQzE4Ljg5NDUxMzEsMi4yODIxNDI4NiAyMC44NzY5NDYsNC4xNjkwNDc2MSAyMS40NDcxNjg1LDYuOTc2MTkwNDcgQzIxLjc5NTM2ODEsOC42OTE2NjY2OCAyMS44NTg0NTY1LDEwLjQ3MjYxOSAyMS42MzAzNjc2LDEyLjEyNjE5MDUgQzIxLjM3ODAxMzgsMTMuOTQ4ODA5NSAyMC43OTQ0NDU3LDE1LjUwNTk1MjQgMTkuODk2NjQ4NywxNi43NTU5NTI0IEMxOS4xMjc0NTUxLDE3LjgyODU3MTQgMTguMDE4NTU0NCwxOC44MjAyMzgxIDE2Ljk0NjA1MSwxOS43Nzk3NjE5IEMxNi43MjAzODg1LDE5Ljk4MDk1MjQgMTYuNDk1OTM5MiwyMC4xODIxNDI5IDE2LjI3NjM0MjksMjAuMzgwOTUyNCBDMTUuMjgwMjczNSwyMS4yODgwOTUyIDE0LjI3MjA3MTgsMjIuMTYxOTA0OCAxMy4zMzMwMjQ2LDIyLjk1OTUyMzggTDEzLjMzMzAyNDYsMjEuNTk0MDQ3NiBDMTMuMzMzMDI0NiwyMC43ODQ1MjM4IDEyLjY2MzMxNjYsMjAuMTI3MzgxIDExLjgzODMxMzksMjAuMTI3MzgxIEM5LjE5MTAyNTk3LDIwLjEyNzM4MSA1LjQ5NDI4NjEsMTkuMjI4NTcxNCAzLjg1NzYyNjQsMTcuNTY1NDc2MiBDMS44MjA1OTc3OCwxNS40OTI4NTcxIDEuMzExMDM3MzEsMTIuNDY2NjY2NyAxLjI0MzA5NTkyLDEwLjI5NDA0NzYgQzEuMTc3NTgxLDguMTkxNjY2NjggMS41MTM2NDgyNiw0LjM5NjQyODU3IDQuNTAzMDY5NjYsMi41OTA0NzYxOSBDNS45NzIzMDIzNiwxLjcwMjM4MDk1IDguMzQwNTQ1MjcsMS4yMTMwOTUyNCAxMS4xNzEwMzI0LDEuMjEzMDk1MjQiIGlkPSJGaWxsLTIwIj48L3BhdGg+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=");
    /* box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26); */
    background-repeat: no-repeat;
    background-size: 55px;
    background-position: center;
}
.hnkcb-hidden {
    display: none !important
}

/* Animations */
#hnkcb-container.hnkcb-appear {
    opacity: 0;
    animation: appear 0.4s cubic-bezier(0.62, 0.28, 0.23, 0.99);
    animation-delay: .2s;
    animation-fill-mode: both;
    transform-origin: bottom right;
}
#hnkcb-container.hnkcb-disappear {
    animation: disappear 0.4s cubic-bezier(0.62, 0.28, 0.23, 0.99);
    animation-delay: 0s;
    animation-fill-mode: both;
    transform-origin: bottom right;
}
@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    1% {
        opacity: 0;
        transform: scale(0.1)
    }

    to {
        display: block;
        opacity: 1;
        transform: scale(1)
    }
}
@keyframes disappear {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    99% {
        opacity: 0;
        transform: scale(0.1)
    }

    to {
        opacity: 0;
        transform: scale(0)
    }
}


/* ----------------------------------------------------------------------------------
  Generic Styling
---------------------------------------------------------------------------------- */

/* Scroll Bars */
#hnkcb-container .webchat__basic-transcript__scrollable {
    margin: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px)
}
#hnkcb-container .webchat__basic-transcript__scrollable::-webkit-scrollbar {
    width: 12px;
    margin: 5px
}
#hnkcb-container .webchat__basic-transcript__scrollable::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(244,244,244,0.5)
}
#hnkcb-container .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.25)
}

/* Inputs */
#hnkcb-container button, #hnkcb-container input, #hnkcb-container optgroup, #hnkcb-container select, #hnkcb-container textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

/* Focus */
#hnkcb-container *:focus {
    outline: none;
}