/* AA Demo Chatbot CSS Customisation */

@import url("https://fonts.googleapis.com/css?family=Nunito+Sans%3A400%2C700%2C600%2C300%7CRoboto%3A500%2C300italic%7CNunito%3A700%2C600%2C400&ver=1563292709");

#chatbot-header { 
    background-color: #313D4C;
    border-bottom: solid 3px #3D3D3D;
}

#chatbot-footer {
    font-size: 90%;
    color: white;
    background-color: #313D4C;
    height: 26px;
    padding: 10px;
    box-sizing: content-box;
}

#chatbot-header-logo {
    background-image: url("agile-datum-message-icon-white.svg");
    background-size: 100% 100%;
    float: left;
    height: 50px;
    width: 50px;
    position: relative;
    left: -3px;
    top: 18px;
}

.chat-button-theme-bubble .chat-button, .chat-button-theme-bubble .chat-button:hover {
    -webkit-box-shadow: none;
    background-color: transparent;
    box-shadow: none;
}

#chatbot-message-avatar-image {
    -webkit-filter: drop-shadow(2px 12px 7px rgba(0, 0, 0, .6));
    filter: drop-shadow(2px 12px 7px rgba(0, 0, 0, .6));
    background-image: url(agile-datum-message-icon-white.svg);
    background-size: cover;
    height: 80px;
    left: -40px;
    position: relative;
    top: -40px;
    width: 80px;
}

#chatbot-message-avatar-image:focus, #chatbot-message-avatar-image:hover  {
    outline: none;
    -webkit-filter: drop-shadow(2px 12px 7px rgba(186, 33, 115, 0.91));
    filter: drop-shadow(2px 12px 7px rgba(187, 33, 116, 0.91));
    overflow:visible;
}

#webchat-close { 
    top: 0;
    background-color: transparent; 
}

#webchat-close:focus {
    outline: none;
    -webkit-box-shadow: 0 0 20px #fff;
    box-shadow: 0 0 20px #fff;
}

.chat-button-theme-bubble {
    animation-duration: 6s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: chatbot-bounce-bubble;
}
@keyframes chatbot-bounce-bubble {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@media only screen and (min-width: 600px) {
    /* Bigger than mobile */

    #chatbot-header-logo {
        left: -7px;
        top: 27px;
    }
}

/* AA Demo site style fixes... */
#webchat > * *, :after, :before {
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#webchat > * ul li {
	line-height: normal;
	list-style-image: none;
	margin: 0 0 10px 0;
}

#webchat > * ul li span {
	color: rgb(191, 191, 191);
}

#webchat > * .message {
	background-color: transparent;
    border: none; 
    margin: 0; 
    padding: 0;
}

#webchat > * button {
	font-size: 12px;
}

#webchat > * .webchat__bubble__content a {
	text-decoration: underline;
}