.Twilio-EntryPoint.css-5x1s5o {
    background: #f26122;
}

.Twilio-MainHeader-default.css-wct8tc {
    height: 60px;
}

.Twilio-MainHeader-default.css-wct8tc img {
    border-radius: 0 !important;
    width: 88px;
    height: 65px;
}

/* Button in the pre-engagement fields */ 
/* .Twilio-DynamicForm-submit.css-512oh4 {
    border-radius: 20px !important;
} */

/*Avatar image*/
    .css-5qycqm {
        margin-left: 12px;
        margin-top: auto;
        margin-bottom: auto;
        display: block;
        max-width: 120px;
        max-height: 60px;
        width: 60px;
        height: 60px;
        border-radius: 60px;
}

/*header font in each message bubble, e.g. "Agent" or "Adrian". display is set to none and both agent and user name inherits from same font styling, therefore same colour. WAS set by default to flex*/
.css-x7yd1e {
    -webkit-box-pack: justify;
    justify-content: space-between;
    color: #818181;
    display: none;
    flex-wrap: nowrap;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-direction: row;
}

/*Visitor chat bubble*/
.css-6ythtk {
    padding-left: 12px;
    padding-right: 12px;
    color: #101921;
    padding-top: 5px;
    padding-bottom: 8px;
    margin-left: 32px;
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-direction: column;
    background: #F26122;
    border-radius: 4px;
}

/*Chat window - radius set to soften edges, due to sizing of elements in header careful not make larger than 5px without first being prepared to edit all the elements in header*/
.Twilio-MainContainer.css-1ay6lgn {
    border-radius: 5px;
}

/* Styling the X and minimise buttons from top right hand corner - START */
/* Remove the button
.Twilio-MainHeader-end.css-1scfgzv {
    display: none;
}
*/

/* Overriding the styling as client css are overriding it, how it look in client and ours are different, we aim the button to appear in client ends */
.Twilio-MainHeader-end.css-1scfgzv {
    margin-right: 20px !important;
}

.Twilio-MainHeader-end.css-1scfgzv svg {
    padding: 0px 0px !important;
    margin: 0 10px !important;
}
/* Styling the X and minimise buttons from top right hand corner - END */    

.Twilio-Button.css-18iy33s {
    background: #101921 !important;
    color: #EFECE5 !important;
    border: 1px solid #101921;
}

/* Styling the agent chat bubble */
/* Username */
.Twilio-MessageBubble-UserName.css-12qtpp3 {
    display: none !important;
}

/* Avatar */
.Twilio-ChatItem-Avatar.css-9ojstg {
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0px !important;
}

/* Override the underline in the message bubble */
.css-1dt02rb a:-webkit-any-link{
    color: #101921 !important;
    text-decoration: none !important;
}

/* Post-end Chat styling*/
.MessageCanvasTrayContent h6 {
    font-size: 13px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}