/*
https://docs.oracle.com/en/cloud/paas/digital-assistant/use-chatbot/oracle-web.html#GUID-E7164949-A7FD-477D-9EB1-872E96B3F54A
Check section for classes Customize CSS Classes
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400&display=swap');

/*The collapsed chat component button*/
.oda-chat-button{
    background: transparent;
}
/*The expanded chat component, which wraps the widget header, conversation, and footer.*/
.oda-chat-widget{
    /*Add border to chat bot widget*/
    border-width: 1px;
    border-color: #d1d1d1;
    border-style: unset;
}
.oda-chat-wrapper {
    font-size: 16px;
}
@media screen and (min-width: 426px) {
.oda-chat-wrapper:not(.oda-chat-embedded) .oda-chat-widget {
  border-radius: 4px;
  height: 655px !important;
  width: 470px !important;
}
}
.oda-chat-wrapper .oda-chat-widget {
    max-height: calc(85vh - 0px) !important;
}
.oda-chat-wrapper .oda-chat-conversation {
    background-color: #F7F7F7 !important;
    padding: 0px !important;
}
.oda-chat-wrapper .oda-chat-star-label>svg>path {
    fill: #ffffff;
}

.oda-chat-wrapper.oda-chat-expanded:not(.oda-chat-drag) .oda-chat-button {
    animation: scale-out-br .25s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
}
.oda-chat-wrapper.oda-chat-collapsed:not(.oda-chat-drag) .oda-chat-button {
    animation: scale-in-br .25s cubic-bezier(0.25, 0.46, 0.45, 0.94) .2s both !important;
}
.oda-chat-wrapper .oda-chat-conversation .oda-chat-conversation-pane.oda-chat-user-icon.oda-chat-bot-icon .oda-chat-message-block .oda-chat-messages-wrapper {
    max-width: calc(0.9 * (100% - 30px)) !important;
}
.oda-chat-wrapper .oda-chat-header-button svg>path {
    fill: #ffffff !important;
}
.oda-chat-wrapper .oda-chat-messages-wrapper .oda-chat-message-list .oda-chat-message {
    width: 100%;
    white-space: normal;
}
.oda-chat-wrapper .oda-chat-messages-wrapper .oda-chat-message-list .oda-chat-message a {
    color: #3f79c0 !important;
}
.oda-chat-wrapper .oda-chat-messages-wrapper .oda-chat-message-list .oda-chat-message.oda-chat-card-message-horizontal .oda-chat-next, .oda-chat-wrapper .oda-chat-messages-wrapper .oda-chat-message-list .oda-chat-message.oda-chat-card-message-horizontal .oda-chat-previous {
    background-color: #005eca !important;
}
.oda-chat-connection-status {
    font-size: 13px;
    font-weight: 300;
    text-transform: lowercase;
}
/*The user input text area*/
	.oda-chat-user-input {
		height: 52px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		border:1px solid !important;
		border-color: #c3c3c3 !important;
}
/*The message bubble*/
.oda-chat-message-bubble {
padding: 10px;
}
@media screen and (min-width: 426px){
	.oda-chat-left .oda-chat-message-bubble {
		color: #1E1F21;
		background-color: #E2E2E4;
		font: 14px !important;
		font-family: 'Noto Sans', sans-serif;
		border-radius: 4px 4px 4px 0;
	}
}
@media screen and (min-width: 426px){
	.oda-chat-right .oda-chat-message-bubble {
		color: #1E1F21;
		background-color: #D6F0FF;
		font: 14px !important;
		font-family: 'Noto Sans', sans-serif;
		border-radius: 4px 4px 0 4px;
	}
}
/*The action buttons wrapper*/
/*color code from .rn_AnswerFeedback .rn_RatingButtons button:hover
/euf/assets/themes/intermedia/css/views/templates/custom.css
actuals shared roll back if needed
    Button Background #91bf27
    Button Mouse-over Highlight #CBE586
*/
.oda-chat-message-bubble button{
    background-color: #005eca !important;
    border:1px solid !important;
    border-color: #0051af !important;
	color: #FFF !important;
}
/*color code from .rn_AnswerFeedback .rn_RatingButtons button:hover
/euf/assets/themes/intermedia/css/views/templates/custom.css
actuals shared roll back if needed
    Button Background #91bf27
    Button Mouse-over Highlight #CBE586
*/
.oda-chat-message-bubble button:hover {
    background-color: #0671ed !important;
    border-color: #0568db !important;
    color: #FFF !important;
  }

.oda-chat-message-bubble button:disabled{
	background-color: #b1b1b1 !important;
    border-color: #ababab !important;
    color: #404040 !important;
    color: #000000 !important;
}

.oda-chat-wrapper .oda-chat-header{
	color: #fff;
	background-color: #005ECA;
    min-height: 56px;
}

.oda-chat-header-button {
  background-color: #000000;
}
.oda-chat-header-button:focus:enabled {
	border: none;
	outline: none;
}

.oda-chat-button:focus:enabled {
	border: none;
	outline: none;
}
.oda-chat-wrapper .oda-chat-header .oda-chat-header-info-wrapper .oda-chat-title {
    font-weight: 500 !important;
}
.oda-chat-wrapper .oda-chat-form-actions, .oda-chat-wrapper .oda-chat-message-actions, .oda-chat-wrapper .oda-chat-message-global-actions {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 5px;
    flex-direction: row;
}
.oda-chat-title {
    font-size: 15px;
}

.oda-chat-title, .oda-chat-subtitle, .oda-chat-connection-status {
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-family: 'Noto Sans', sans-serif;
}

.oda-chat-loading-icon {
    background-color: #4fa005 !important;
    display: -webkit-flex;
    display: flex;
}

.oda-chat-round {
    background-color: #91bf27;
}
 
.oda-chat-round:focus:enabled {
background-color: #4fa005 !important;
}

.oda-chat-round:hover:enabled {
background-color:#0671ed !important;
}

.oda-chat-round svg {
    fill: white;
}

.oda-chat-round:hover {
    background:  #4fa005 !important;
    color: #fff;
}

.oda-chat-card {
    background-color: #E2E2E4;
}

.oda-chat-left .oda-chat-message-bubble, .oda-chat-left .oda-chat-message-header, .oda-chat-left .oda-chat-message-footer {
    color: #000000;
}
  
.oda-chat-card-actions .oda-chat-action-postback {
    background-color: #005eca !important;
    border-color: #0051af !important;
    border-style: solid;
    border-width: 1px;
    color: #fff;
}

.oda-chat-message-global-actions .oda-chat-action-postback {
    background-color: #005eca;
    border-style: solid;
    border-width: 1px;
    border-color: #0051af;
	color: #ffffff !important;
    font-family: "Oracle Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.oda-chat-card-message-content button:hover{
    background-color: #0671ed !important;
    border-color: #0568db !important;
	color: #ffffff !important;
}

.oda-chat-wrapper .oda-chat-message-global-actions button {
    background-color: #005eca !important;
    border-color: #0051af !important;
	color: #ffffff !important;
}

.oda-chat-message-global-actions button:hover{
    background-color: #0671ed !important;
    border-color: #0568db !important;
	color: #ffffff !important;
}
  
.oda-chat-wrapper {
	bottom: 7% !important;
	right: 0px !important;
}

.oda-chat-wrapper button {
    margin: 0 0px 4px 0px !important;
}

.oda-chat-wrapper .oda-chat-button {
    right: 0px;
    height: 85px!important;
    width: 50px;
	bottom: 50px;
	border-radius: 4px 0px 0px 4px;
	background: #93bd46 !important;
    color: #fff;
	background-image: url("/euf/assets/oda/images/im-da-text.svg") !important;
	background-position: 52px 30px !important;
	background-repeat: no-repeat !important;
	background-size: 140px !important;
	display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    transition: 0.5s;
    background-position: 200px 16px; 
}

.oda-chat-button:hover {
    width: 200px;
    transition: 0.5s;
    border-radius: 4px 0px 0px 4px;
	background-image: url("/euf/assets/oda/images/im-da-text.svg") !important;
	background-position: 52px 30px !important;
    background-repeat: no-repeat !important;
	background-size: 140px !important;
	opacity: 0;
}

.oda-chat-wrapper .oda-chat-button.animate {
    width: 200px;
    transition: 0.5s;
    border-radius: 4px 0px 0px 4px;
    background-image: url("/euf/assets/oda/images/im-da-text.svg") !important;
    background-position: 52px 30px !important;
    background-repeat: no-repeat !important;
    background-size: 140px !important;
    opacity: 0;
}

.oda-chat-wrapper .oda-chat-button svg, .oda-chat-wrapper .oda-chat-button img {
    height: unset;
    width: unset;
    margin-left: 5px;
    max-width: 100%;
    max-height: 30px;
}

.oda-chat-button-icon {
    height: 100%;
    max-height: 48px;
    max-width: 48px;
    width: 100%;
}

@media screen and (min-width: 769px){
.oda-chat-wrapper {
bottom: 20px;
right: 0px;
}

}
@media screen and (min-width: 426px){
.oda-chat-widget:not(.oda-chat-sidepanel) {
    right: 20px!important;
    bottom: 20px;
}
}
.oda-chat-button {
    right: 0px;
    height: 50px;
    width: 50px;
	bottom: 140px;
	border-radius: 4px 0px 0px 4px;
	background: #98bc33;
    color: #fff;
	display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    transition: 0.5s;
    background-position: 200px 16px; 
}

.oda-chat-button img {
    display: block;
    height: 50px;
    max-height: 100%;
    max-width: 100%;
    width: 50px;
}

.oda-chat-expanded .oda-chat-widget {
    -webkit-animation: scale-in-br 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    animation: scale-in-br 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}
.oda-chat-collapsed .oda-chat-widget {
    -webkit-animation: scale-out-br 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
    animation: scale-out-br 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
}
}
.oda-chat-expanded .oda-chat-widget {
    -webkit-animation: scale-in-br 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    animation: scale-in-br 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}
.oda-chat-collapsed .oda-chat-widget {
    -webkit-animation: scale-out-br 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
    animation: scale-out-br 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
}
.oda-chat-collapsed:not(.oda-chat-drag) .oda-chat-button {
    -webkit-animation: scale-in-br 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    animation: scale-in-br 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    display: flex;
}
.oda-chat-expanded:not(.oda-chat-drag) .oda-chat-button {
    -webkit-animation: scale-out-br 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
    animation: scale-out-br 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
}
.oda-chat-action-postback {
padding: 6px 15px !important;
}
#chat-bot-banner {
	padding-top: 10px;
    background: #F8F8F8 0% 0% no-repeat padding-box;
    margin-left: auto;
	margin-right: auto;
    text-align: center;
}

#top-text {
    background: #F8F8F8 0% 0% no-repeat padding-box;
}

.oda-chat-embed-sticky-top {
    background: #F8F8F8 0% 0% no-repeat padding-box;
    overflow-y: scroll;
    margin-left: auto;
	margin-right: auto;
    width: 470px;
}

.oda-chat-conversation-pane {
    background: #F8F8F8 0% 0% no-repeat padding-box;
    padding: 6px;
}

.oda-chat-message-global-actions{
	flex-direction: unset;
}

.oda-chat-message-global-actions .oda-chat-action-postback {
    background: #aecd3e;
	margin-top: unset;
	margin-bottom: unset;
	margin-right: 10px;
}

.oda-chat-message-global-actions .oda-chat-action-postback.oda-chat-disabled:hover, .oda-chat-message-global-actions .oda-chat-action-postback.oda-chat-disabled:focus, .oda-chat-message-global-actions .oda-chat-action-postback.oda-chat-disabled:active {
    background: #850707;
    border-color: #c5c5c5;
    color: #737373;
}

.oda-chat-round {
    background: #0e7295;
}

.oda-chat-conversation-avatar{
    /* Layout Properties */
    top: 215px;
    left: 194px;
    width: 144px;
    height: 144px;
	/* Modified by CSS Corp */
    margin-left: auto;
	margin-right: auto;
	/* End of modification by CSS Corp */
    margin-top: 22px;
    /* UI Properties */
    /* background: transparent url('/euf/assets/themes/standard/botimages/avatar.png') 0% 0% no-repeat padding-box; */
	background: transparent url('/euf/assets/oda/images/chatgraphic.svg') 0% 0% no-repeat padding-box;
    /*border: 1px solid #DBDBDB;*/
    opacity: 1;
}
.oda-chat-conversation-text{
    /* Layout Properties */
    top: 378px;
    left: 208px;
    width:100%;
    /* width: 116px;
    height: 19px;
    margin-left: 34.22px;  */
    margin-top: 19px;
    /* UI Properties */
    text-align: center;
    font: bold normal normal 14px/19px Roboto;
    letter-spacing: 0.13px;
    color: #000000;
    opacity: 1;
}
#welcomeScreen {
    width: 100%;
    overflow: hidden;
}
#welcomeScreen img {
    max-width: 100%;
    height: auto;
}
#welcomeScreen .buttons {
    margin-top: 20px;
}
#welcomeScreen .buttons button {
    width: 90%;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/*                    */
/* Bot Welcome Screen */
/*                    */
@keyframes slideInFromRightBubble {
    0%   {transform: translateX(100%); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
  }
  
  @keyframes slideInFromTopBubble {
    0%   {transform: translateY(-100%); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
  }
.firstBubbleText {
    font-size: 25px !important;
    padding-top: 28px;
    padding-right: 10px;
}
.secondBubbleText{
    padding-top: 32px;
}
div.firstBubble, div.secondBubble {
  display: inline-block;
  align-items: center;  /* center text vertically */
  justify-content: center;  /* center text horizontally */
  padding: 10px;  /* add some padding around the text */
  text-align: center;  /* center text lines */
}

div.firstBubble {
  width: 230px; 
  height: 98px;
  background: url('https://tst3.qa.support.intermedia.com/euf/assets/oda/images/chatbubble_left.png') no-repeat;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  transform-origin: right;
  animation-name: slideInFromRightBubble;
  animation-duration: 0.3s;
  margin-top: 20px;
}

div.secondBubble {
  display: block;
  width: 405px;
  height: 165px;
  margin: auto;
  background: url('https://tst3.qa.support.intermedia.com/euf/assets/oda/images/chatbubble_bottom.png') no-repeat;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
  animation-name: slideInFromTopBubble;
  animation-duration: 0.3s;
}

img.botIconWelcome {
  width: 160px; 
  height: 160px;
  display: inline-block;
  vertical-align: top; 
}