

* {
font-family: "Appian Open Sans", Sans-Serif !important;
}

/*#widget-container > header > div > div.MuiAvatar-root.MuiAvatar-square {
    width: 50px ;
       height: 50px ;  
       border-radius:50px;
}

#widget-container > header > div > div.MuiAvatar-root.MuiAvatar-square > img{
       width: 35px ;
       height: 35px ;  
}

#chatButton > button > div{
    width: 100px ;
       height: 100px ;  
}

#chatButton > button > div > img{
   width: 75px ;
       height: 75px;   
}*/

.ac-textBlock > pre {
word-wrap: break-word;
    white-space: pre-wrap;
}
.webchat__icon-button--stretch[title="Upload file"] {
       background-image: url( 'https://piademo.wns.com/img/attachment.svg' );
       width: 25px !important;
       height: 25px !important;
       cursor: pointer;
           background-repeat: no-repeat;
           top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    padding: 2px !important;
}

.webchat__icon-button--stretch[title="Speak"]{
           background-image: url( 'https://piademo.wns.com/img/microphone.svg' );
               background-repeat: no-repeat;
       width: 25px !important;
       height: 25px !important;
       cursor: pointer;
       top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
        padding: 2px !important;
}

.webchat__icon-button--stretch[title="Upload file"] > svg,
.webchat__icon-button--stretch[title="Speak"] > svg {
    display:none;
}

.webchat__icon-button > svg {
    /*fill: #231F20 !important;*/
}

.widgetappbar-svg{
    width: 20px !important;
    height: 20px !important;   
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;*/
}

#widget-container >header  button:hover {
    transform: scale(1.1);    
}

#widget-container >header  button:active{
    transform: scale(0.9);
}

#chat-widget-menu{
    transform: rotate(90deg) !important;
   /*padding-left: 20px;*/
}

.widgetappbar-svg img {
	display: block;
}

.sidebar-svg{
    width: 20px !important;
    height: 20px !important;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;*/
}

.MuiSvgIcon-root{
    /*fill: #00b19c !important;    */
}
.webchat__stacked-layout__content:has(#greeting-message-horizontal-alligned){
        max-width: 48rem;
}

#greeting-message-check-status-container{
    height: 100% !important
}


#greeting-message-check-status-container .ac-columnSet {
    height: 100% !important
}


#greeting-message-module-description-1, #greeting-message-module-description-2{
    font-size: 12px !important;
}


#widget-container {
    border: none !important;
    width: 34em;
    /*height: 570px!important;*/
}

#widget-container > header > .MuiToolbar-root 
{
padding-left: 12px;
    padding-right: 24px;
}


#widget-container > header > .MuiToolbar-root > .MuiAvatar-square
 {
        height: 50px;
 }


#greeting-message-bg-container .ac-columnSet {
    height:100%;
}

#greeting-message-bg-container {
    height:100%;
}

/*#greeting-message-bg-container .ac-container
{
    justify-content: space-around !important;
}
#greeting-message-check-status-container .ac-container
{
    justify-content: space-around !important;
}*/

.chatWidget {
    bottom: 100px !important;
}


.webchat__basic-transcript__scrollable {
        background: #F3F6FD !important;
}

.webchat__send-box {
     background: #F3F6FD !important;
}

/*.webchat__typingIndicator 
{    background: #F3F6FD !important;}*/

#chat-widget-app-drawer > div.MuiPaper-root{ 
    background:#F3F8F9 !important; 
}

#chat-widget-app-drawer > div.MuiPaper-root > ul >div { 
    background:#F3F8F9; 
    border-bottom: 0.5px solid #00b19c !important;
}
#demo-simple-select-helper:hover{
    transform: scale(1.1);    
}

#demo-simple-select-helper:active{
    transform: scale(0.9);    
}

#chat-widget-app-drawer > div.MuiPaper-root > ul >div:hover { 
    background:#CCEFEB; 
}
#chat-widget-app-drawer > div.MuiPaper-root > ul >div:active { 
    transform: scale(0.9) !important;
}

#chat-widget-app-drawer > div.MuiPaper-root > ul >div:hover {
    transform: scale(1.1);
}


#chat-widget-app-drawer > div.MuiPaper-root > ul {
    padding: 0;
}

.MuiAccordionSummary-content p {
    font-size: 13px;
}
.MuiAccordionSummary-content{
    align-items: center;   
}
.webchat__bubble.webchat__bubble--from-user .webchat__bubble__content {
    color: #231F20 !important;
    border: 0 !important;
}

.webchat__bubble.webchat__bubble--from-user .webchat__bubble__nub-outline {
    opacity: 0 !important;
}

#widget-container header #chat-widget-header-product-name { 
        font-weight: bold;
        margin-top: 5px;
    margin-bottom: 5px;
}

#greeting-message-horizontal-alligned #greeting-message-module-logo-2 > img{
    width: 35px !important;
    height: 35px !important;
}
#greeting-message-horizontal-alligned #greeting-message-module-logo-1 > img{
    width: 35px !important;
    height: 35px !important;
}
#widget-container header #chat-widget-header-product-description { 
        font-weight: bold;
        font-size: 12px;
}

.webchat__initialsAvatar {
    background: none !important;
    opacity: 0 !important;
}
#pomodule{
    padding: 15px 15px 15px 30px !important 
}
.webchat__defaultAvatar {
     border-radius: 30% !important;
    height: 30px !important;
    width: 30px !important;
}
.webchat__imageAvatar__image img {
        left: 40% !important;
}
.webchat__imageAvatar__image img[src*="user.svg"] {
     height: 30px !important;
    width: 30px !important;
}

.ac-image[src*="purchase_order.svg"]{
     height: 40px !important;
    width: 40px !important;
}
.botActivityDecorator .botActivityDecorator__buttonBar {
    margin-left: 73% !important;
}

.webchat__send-box__button {
    padding-left: 10px;
    padding-right: 10px;
}


.webchat__send-box__main {
    background-color: #ffffff !important;
    border-radius: 0px !important;
    height: 50px !important;
   margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
}


.ui-state-highlight {
    color: blue;
}

#ui-id-1, .ui-menu.ui-autocomplete {
    min-height: 100px !important;
    overflow-y: scroll !important;
    overflow-x: hidden;
    height: 200px !important;
    background-color: white;
    	z-index: 1001;

}

#chatButton{
    	z-index: 1001;
    
}

.alert-danger {
    color: rgb(164, 38, 44);
}



    .ac-selectable:hover {
        //background-color: white !important;
        cursor: pointer !important;
    }

.ac-container {
        min-width: 60px;
            /*width: 60px !important;
    height: 60px !important;*/
}
    .ac-container img {
    margin: auto !important;
                /*width: 100% !important;
    height: 100% !important;*/
    }

.ac-pushButton {
    padding: 5px !important;
    /* margin: 5px !important; */
    border-radius: 0px !important;
    /*border-color: #B9503C !important;*/
    /*color: #ffffff !important;
    background-color: #00b19c !important;*/
}

    .ac-pushButton:hover {
        cursor: pointer;
/*color: #00b19c !important;*/
    /*background-color:  #ffffff !important;
    border: 1px solid #00b19c;*/
    }

.ac-textInput {
    height: 30px;
}

/*.ac-textBlock{
    color: rgb(118, 118, 118) !important;
}*/

.ac-textBlock ol{
    width: 90% !important;
}

.webchat__suggested-actions__button-text{
        /*color: #467C9C;*/
}

.webchat__suggested-action__button {
        /*background: #ffffff !important;*/
    /*border-style: solid !important;*/
        border-radius: 0px !important;
/*border: 1px solid #457B9D;*/
opacity: 1;
cursor:pointer;
    height: 2rem !important;
}

    .webchat__suggested-action__button:hover {
        /*background:rgb(245, 245, 245) !important;*/
        box-shadow: 0px 4px 8px #00000075;
        /*border-style: solid;*/
        /*border-color: #B9503C;*/
/*border: 1px solid #457B9D;        */
        border-radius: 0px !important;
    }
    

 .ac-input-container .ac-dateInput  {
    min-width: 0px;
    border-color: rgb(118, 118, 118) !important;
    border-radius: 0px;
    border: 1px solid;
    padding-left: 1rem !important;
        padding-right: 5px !important;
    width: 100%;
    height: 36px
}
  .ac-input-container .ac-multichoiceInput  {
    min-width: 0px;
    border-color: rgb(118, 118, 118) !important;
    border-radius: 0px;
    border: 1px solid;
    padding-left: 1rem !important;
        padding-right: 5px !important;
    width: 100%;
    height: 36px
}
  .ac-input-container .ac-numberInput  {
    min-width: 0px;
    border-color: rgb(118, 118, 118) !important;
    border-radius: 0px;
    border: 1px solid;
    padding-left: 1rem !important;
        padding-right: 5px !important;
    width: 100%;
    height: 36px
} 

 .ac-input-container
{
	width: 23rem;
}

/*
.muiltr-1hy9t21 {
    width: 100px!important;
    height: 100px!important;
}*/

div#driver-highlighted-element-stage {
    display: none !important;
}

div#driver-popover-item {
    max-width: 400px !important;
}

/*.ac-textBlock {
    color: #231F20 !important;
}*/

.MuiInputBase-formControl {
 border-radius: 0;   
}

p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    color: #231F20 !important;
}

.ac-textRun {
    font-weight: bold !important;
    /*color: rgb(118, 118, 118) !important;*/
    color: rgb(118, 118, 118) !important;

}

.ac-textRun:nth-child(2) {
    font-weight: bold !important;
    color: rgb(220 68 68) !important;
}

/*span.ac-textRun {
    /* color: grey; */
    color: rgb(118, 118, 118) !important;
}*/

.MuiAvatar-square > .muiltr-1hy9t21 {
    width: 60px !important;
    height: 60px !important;
}

.botActivityDecorator__button > img{
    width: 22px;
    height: 22px;
}

.botActivityDecorator__button > img:hover{
    width: 25px;
    height: 25px;
}

#widget-container > div > div.webchat__basic-transcript.webchat--css-zefbi-1a1to1.webchat--css-zefbi-1tdc372.webchat--css-zefbi-1rr4qq7 > div.react-scroll-to-bottom--css-oxyaa-1n7m0yu.webchat__basic-transcript__scrollable > ul > li:nth-child(6) > div.webchat__basic-transcript__activity-box > div > div.webchat__stacked-layout__main > div.webchat__stacked-layout__content > div > div.webchat__bubble.webchat__bubble--hide-nub.webchat__bubble--nub-on-top.webchat--css-zefbi-1qo0vqe.webchat--css-zefbi-ikhn2j.webchat__stacked-layout__attachment > div.webchat__bubble__content > div > div > div:nth-child(3) > div:nth-child(19)

#Show_Info_DOC_TYPE, #Show_Info_ACCTASSCAT, #Show_Info_MATERIAL, #Show_Info_PLANT, #Show_Info_PUR_GROUP, #Show_Info_MAT_GRP, #Show_Info_DES_VENDOR
{
    font-size: 12px !important;
}

/*.ac-columnSet.ac-selectable {
    background-color: #b6b5b5 !important;
}*/
/*.ac-selectable{
    background-color: red;
}*/

/*.ac-pushButton[aria-pressed="true"] > div {
    color: white !important;
}*/

.driver-close-btn {
    height: 20px !important;
    border: 0px !important;
    background-color: white !important;
    border-radius:0px!important;
    padding:0px !important;
}

#chat-widget-expand-icon {
  animation: showEle 0s 3s forwards;
    opacity: 0; 
}

@keyframes showEle {
  to   { opacity: 1; }
}