:root {
        /* neutral colors */
    --white-color: #FFFFFF;
    /* white */
    --black-color: #000000;
    /* black */
    --light-gray-color: #F8F8F8;
    /* light gray */
    --medium-gray-color: #ececec;
    /* medium gray*/
    --dark-gray-color: #737373;
    /* dark gray */
    /* Branding colors */
    --primary-brand-color: #E3027F;
    /* blue */
    --secondary-brand-color: #e476b2;
    /* purple*/
    --tertiary-brand-color: #000000;
    /* black */
    --primary-color: #E3027F;
    --primary-light-color: #e476b2;
    --primary-dark-color: #E3027F;
    --secondary-dark-color: #737373;
}


body {
    background-image: url(background.png); 




    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media (min-width: 480px) {
    body{
        background-image: url(background.png);
    }
}

/***********************************************************
 *
 * Chat widget styling section - collapsed
 *
 ***********************************************************/

 
 .oda-chat-wrapper .oda-chat-card {
    background: var(--white-color) !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 {
    position: absolute;
    z-index: 10;
    width: 36px;
    height: 36px;
    left: 8px;
    padding: 0;
    overflow: hidden;
    background-color: var(--white-color) !important;
    border: none;
    box-shadow: 0px 2px 4px rgba(0,0,0,.1);
    top: calc(50% - 18px);
    justify-content: center;
}



.oda-chat-wrapper .oda-chat-conversation {
    background-color: var(--light-gray-color);
}

button.oda-chat-button.oda-chat-button.oda-chat-flex {
    border: none;
    border-radius: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    display: block;
    height: 48px;
	text-align: center;
    width: 230px;
    background-color: var(--primary-brand-color) !important;
    z-index: -5;
}

.oda-chat-wrapper .oda-chat-message-global-actions button:not(:disabled):hover {
    background-color: var(--medium-gray-color) !important;
    color: black;
}


button.oda-chat-button > img.oda-chat-button-icon{
    width: 100%;
    height:100%;
}

.text-magenta {
    color: var(--primary-brand-color);
    font-weight: bold
}

/* Chatbutton - position of the button text*/
.oda-button-text {
    position: absolute;
    top: 0px;
    right: 15px;
    line-height: 30px;
    font-weight: bold;
    font-size: 13px;
}

/* Chatbutton - position of the button subtext */
.oda-button-subtext {
    position: absolute;
    top: 0px;
    right: 16px;
    line-height: 65px;
    font-weight: normal;
    font-size: small;
}

/* Notification Badge */
div.oda-chat-wrapper.oda-chat-default.oda-chat-collapsed {
    position: relative;
}

div.oda-chat-wrapper.oda-chat-default.oda-chat-collapsed > .oda-chat-notification-badge {
    right: -10px !important;
    top: -10px !important; 
	border-radius: 50%;
    animation: cssAnimation 0s 3s forwards;
    visibility: hidden;
    position: absolute; 
}

.oda-chat-notification-badge {
    top: -60px !important;
    right: -15px !important;
    width: 25px !important;
	border-radius: 50%;
	--color-notification-badge-background: var(--primary-brand-color) !important;
    position: absolute;
}

@keyframes cssAnimation {
  to   { visibility: visible;}
}


/***********************************************************
 *
 * Chat widget expanded styling section
 *
 ***********************************************************/


/* width of the speech bubbles */

/*
@media (max-width: 480px){
  .oda-chat-message-block.oda-chat-flex.oda-chat-left {
    width:380px;
 }
}

@media (min-width: 481px){
  .oda-chat-message-block.oda-chat-flex.oda-chat-left {
    width:380px;
 }
}
*/

.oda-chat-message-block.oda-chat-flex.oda-chat-left {
    width:380px;
}

.oda-chat-wrapper .oda-chat-conversation .oda-chat-conversation-pane.oda-chat-bot-icon.oda-chat-bot-icon .oda-chat-message-block .oda-chat-messages-wrapper, .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 {
 width: calc(100% - 80px);
}

.oda-chat-message-actions .oda-chat-action-url:hover,
.oda-chat-message-content .btn.btn-secondary:hover {
    background: rgba(227, 2, 127, 0.45)
}

/* all hyperlinks in primary color like references to mail, urls, etc. */
.oda-chat-wrapper a{
  color: var(--primary-brand-color) !important;
}

/* Line around the chat window*/
.oda-chat-expanded .oda-chat-widget {
    border: 1px solid var(--medium-gray-color);
    border-radius:20px !important;
}

/*
 * ------------- HEADER SECTION + CHATTITLE --------------
 */

.oda-chat-header {
    align-items: center;
    box-sizing: border-box;
    color: #ffffff;
    border-radius: 15px 15px 0 0;
    background: var(--primary-brand-color) !important;
}

.oda-chat-title {
    overflow: hidden !important;
    color:  var(--white-color);
}
.oda-chat-wrapper {
    --color-header-button-fill: var(--white-color);
	--color-header-button-fill-hover: var(--white-color);
}

/* minimize button in header */
.oda-chat-header-button svg > path {
 fill: var(--white-color) !important;
}
        

/*
 * ------------- PRIMARY CUSTOM AND GLOBAL BUTTONS --------------
 */

 /* make primary buttons fit 100% of their parent container */
:not(.oda-chat-message-global-actions) > .oda-chat-action-postback.oda-chat-flex,{
  width:100%;
}

/*.oda-chat-wrapper .oda-chat-messages-wrapper .oda-chat-message-list .oda-chat-message .oda-chat-message-wrapper .oda-chat-content-wrapper{
  max-width: max-content;
}*/

  /* Primary buttons - Active */
.oda-chat-conversation-container button.oda-chat-action-postback,
.oda-chat-conversation-container .oda-chat-message-actions button.oda-chat-action-postback,
.oda-chat-conversation-container .oda-chat-card .oda-chat-card-actions button,
.oda-chat-conversation-container .oda-chat-message-actions .oda-chat-action-postback:focus:enabled
{
    border: 1px solid var(--primary-brand-color);
    color: var(--white-color);
    background: var(--primary-brand-color);
    height:45px;
    font-weight:normal;
	width:100%;
	justify-content:center;
}

/* Primary buttons - Active */
.oda-chat-conversation-container button.oda-chat-action-postback:hover,
.oda-chat-conversation-container .oda-chat-message-actions button.oda-chat-action-postback:hover,
.oda-chat-conversation-container .oda-chat-card .oda-chat-card-actions button:hover,
.oda-chat-conversation-container .oda-chat-message-actions .oda-chat-action-postback:focus:enabled:hover
{
    border: 1px solid var(--primary-brand-color);
    color: var(--primary-brand-color);
    background: var(--white-color);
}

/*Custom buttons from resource bundles*/
.cy2-internal-link-button .oda-chat-action-postback{
 margin-top:5px;
 text-align: center !important;
 width:100%;
}

/*Custom buttons from resource bundles hover*/
.cy2-internal-link-button .oda-chat-action-postback:hover {
    color: var(--primary-brand-color) !important;
    background: var(--white-color) !important;
}


/* Global buttons - Active */
.oda-chat-conversation-container .oda-chat-message-global-actions button.oda-chat-action-postback{
    padding:6px 1px;
    margin: 0 6px 0 0;
    white-space: wrap;
    max-width: 130px;
    background: var(--white-color);
    color: var(--primary-brand-color);
    border: 1px solid var(--primary-brand-color);
    height:35px;
    font-weight:normal; 
 }

 /* Global buttons thumbs up or down - Active */
.oda-chat-conversation-container .oda-chat-message-global-actions button.oda-chat-action-postback > .thumbsupordown{
    min-width: 130px;
 }

 /* Global buttons with icons in it (thumbs up / down) next to eachother */
.oda-chat-conversation-container .oda-chat-message-global-actions.oda-chat-has-message-icon{
   display:flex;
}

/* Global buttons - Hover */
 .oda-chat-conversation-container .oda-chat-message-global-actions button.oda-chat-action-postback:hover{
    background: var(--primary-brand-color);
    color: var(--white-color);
    border: 1px solid var(--primary-brand-color);
 }

/* centers global actions text */
 .oda-chat-wrapper .oda-chat-message-global-actions button {
    text-align: center;
}

/* styles globalactions buttons in row */
.oda-chat-message-global-actions {
    display: flex;
    flex-direction: row !important;
  }

/* sets globalactions button text to black */
.oda-chat-wrapper .oda-chat-message-global-actions button:hover {
    color: black !important;
}

/* Global buttons - Disabled state */
.oda-chat-conversation-container .oda-chat-message-global-actions button.oda-chat-action-postback:disabled,
.oda-chat-conversation-container .oda-chat-message-actions button.oda-chat-action-postback.oda-chat-disabled,
.oda-chat-conversation-container .oda-chat-message-actions button.oda-chat-action-postback.oda-chat-disabled:hover,
.oda-chat-conversation-container .oda-chat-card .oda-chat-card-actions button.oda-chat-disabled,
.oda-chat-conversation-container .oda-chat-card .oda-chat-card-actions button.oda-chat-disabled:hover {
    background: var(--light-gray-color);
    border: 1px solid var(--dark-gray-color);
    color: var(--dark-gray-color);
    pointer-events: none;
}

/*
 * ------------- CHAT BUBBLES RESPONSE FROM BOT --------------
 */

/* Chat bubbles - Chatbot messages */
.oda-chat-conversation-container .oda-chat-left .oda-chat-message-bubble {
    background: var(--medium-gray-color) !important;
    color: var(--tertiary-brand-color) !important;
    padding: 5px;
    border-radius: 10px 10px 10px 0px !important;
}

/* Chat bubbles - User messages */
.oda-chat-conversation-container .oda-chat-right .oda-chat-message-bubble {
    background: var(--primary-brand-color) !important;
    color: var(--white-color) !important;
    border-radius: 10px 10px 0 10px !important;
}

/*
 * ------------- FEEDBACK STAR RATINGS --------------
 */

.oda-chat-wrapper .oda-chat-star-label>svg>path{
 fill: var(--medium-gray-color);
 stroke: var(--primary-brand-color);
}

.oda-chat-wrapper .oda-chat-active + .oda-chat-star-label>svg>path{
 fill: var(--primary-brand-color) !important;
}