body {
    background-image: url(mobile-screenshot.jpeg); 




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

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



: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: #1f1d21;
    /* blue */
    --secondary-brand-color: #f5f5f5;
    /* purple*/
    --tertiary-brand-color: #000000;
    /* black */
}

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


button.oda-chat-icon.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;
    width: 230px;
    background-color: var(--primary-brand-color) !important;
}

button.oda-chat-icon > 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;
    color: #1f1d21;
    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 > .oda-chat-notification-badge {
    right: -10px !important;
    top: -7px !important;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: var(--primary-brand-color);
    z-index: 99999;
    animation: cssAnimation 0s 3s forwards;
    visibility: hidden;

}

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

.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: #f5f5f5
}

/* 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;
 width:100%;
}

/*Custom buttons from resource bundles hover*/
.cy2-internal-link-button .oda-chat-action-postback:hover {
    border: 1px solid var(--secondary-brand-color);
    color: var(--white-color);
    background: var(--secondary-brand-color);
}


/* 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);
 }

/* 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;
}