:root {
    --brandColor: #000000;
    --iconSize: 70px;
}

.icon-bar {
    position: fixed;
    top: 82%;
    right: 12px;
    z-index: 1060;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.circle {
    width: var(--iconSize);
    height: var(--iconSize);
    border-radius: 50%;
    z-index: 1065;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 50%);
    border: 6px solid var(--brandColor);
    /*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days start*/
    transition: all .2s ease-in-out;
    animation: grow 2s infinite;
    /*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days End*/
}

.circle:hover {
    cursor: pointer;
}

/*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days start*/
@keyframes grow {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days End*/

@media(max-width : 500px) {
    .circle {
        height: var(--iconSize);
        width: var(--iconSize);
        bottom: 14%;
        z-index: 1065;
        box-shadow: 0 0 12px 0 rgb(0 0 0 / 50%);
        border: 6px solid var(--brandColor);
    }
}

.embeddedServiceHelpButton .helpButton .uiButton {
    background-color: var(--brandColor);
    font-family: "Arial", sans-serif;
    width: var(--iconSize);
    height: var(--iconSize);
    border-radius: 50%;
    min-width: 5em;
}

.embeddedServiceHelpButton .helpButton .uiButton .helpButtonLabel {
    display: none;
}

.embeddedServiceHelpButton .helpButton .uiButton .embeddedServiceIcon {
    margin: auto;
}

.embeddedServiceHelpButton .embeddedServiceIcon::before {
    font-size: 2.5em;
    display: block;
}

.embeddedServiceHelpButton .helpButton .uiButton:focus {
    outline: 1px solid var(--brandColor);
    min-width: 5em;
    border-radius: 50%;
}

.embeddedServiceSidebarMinimizedDefaultUI.helpButton {
    font-family: "Arial", sans-serif;
    border-radius: 50%;
    min-width: 3.2em;
    width: var(--iconSize) !important;
    height: var(--iconSize) !important;
}

.embeddedServiceSidebarMinimizedDefaultUI .minimizedText {
    display: none;
}

.embeddedServiceSidebarMinimizedDefaultUI .content {
    padding: 0 0px;
}

.embeddedServiceSidebarMinimizedDefaultUI {
    width: var(--iconSize) !important;
    height: var(--iconSize) !important;
    border-radius: 10%;
    min-width: 7em;
}

.message {
    padding: 1px 1px 1px 1px;
    margin: 0px 0px;
    border-style: none;
}

.embeddedServiceIcon svg {
    font-size: 2.2em !important;
}

.embeddedServiceSidebarMinimizedDefaultUI .messageContent {
    min-width: 3.2em;
}

.cEShop_PreChat input.slds-input {
    font-size: 13px !important;
    border-radius: 4px !important;
    padding: 0 12px 0 16px !important;
    line-height: 30px !important;
    width: 90% !important;
}

.cEShop_PreChat select.select {
    font-size: 13px !important;
    height: 32px !important;
}

.embeddedServiceHelpButton {
    z-index: 1001;
}

.embeddedServiceHelpButton .helpButton {
    bottom: 14% !important;
    width: var(--iconSize) !important;
    height: var(--iconSize) !important;
}

.embeddedServiceSidebarMinimizedDefaultUI.helpButton {
    bottom: 14% !important;
    width: var(--iconSize) !important;
    height: var(--iconSize) !important;
}

.embeddedServiceSidebarMinimizedDefaultUI {
    bottom: 14% !important;
    width: var(--iconSize) !important;
    height: var(--iconSize) !important;
}

/*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days Start*/
.wave {
    position: fixed;
    text-align: center;
    top: 0px;
    right: 0px;
    width: var(--iconSize);
    height: var(--iconSize);
    border-radius: 50%;
    background-color: var(--brandColor);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: Waveeffects 2s linear infinite;
}

@keyframes Waveeffects {
    from {
        opacity: 1;
    }

    to {
        transform: scale(1.6);
        opacity: 0;
    }
}

/*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days End*/

@media(max-width: 500px) {
    .circle {
        height: var(--iconSize);
        width: var(--iconSize);
    }

    /*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days Start*/
    .wave {
        height: var(--iconSize);
        width: var(--iconSize);
    }

    /*To show the Online/Offline Chat Icon on the basis of HolidayList, Working Hours and Working Days End*/
}

@media print {

    .noPrint,
    .embeddedServiceHelpButton {
        display: none;
    }
}

.openChatsection {
    /* display: none; */
    position: fixed;
    height: 560px;
    max-height: 100%;
    /* overflow-y:auto; var(--chatBackground)*/
    background: #ffffff;
    /* opacity: 1; */
    /* bottom: 0; */
    right: 30px;
    z-index: 9999;
    padding-right: 0px;
    padding-left: 10px;
    bottom: -600px;
    opacity: 0;
    margin-right: -100px;
    transition: transform 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.2s ease 0.2s;
    transform-origin: bottom right;
    transform: translate(-10px, -10px);
}
.showup {
    transform: translate(-100px, -600px);
    opacity: 1;
}
.chatHeader {
    background: #FFFFFF;
    margin-left: -10px;
    margin-right: -15px;
    width: calc(100% + 10px);
    min-height: 60px;
    border-radius: 10px 10px 0px 0px;
    margin-top: -48px;
    display: flex;
    color: #ffffff;
    padding: 12px 0px 0px 0px;
}
.chatheaderDivider {
    padding-bottom: 10px;
    border-bottom: 1px solid #E8E8E8;
}
#chatContent form {
    margin-top: 15px;
    padding-right: 15px;
    padding-left: 5px;
}

#chatContent form p {
    font-size: 14px !important;
    color: #808080;
    text-align: center;
    font-weight: 300 !important;
    line-height: 18px !important;
}

.chatmessages {
    height: 460px;
    overflow-y: scroll;
    padding-right: 10px;
    scrollbar-width: thin;
}
.chat-reply p{
    font-family: "robotoregular" !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 0px;
    line-height: 18px;
}

.userInput {
    margin: 13px 0px;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.userInput img {
    margin-right: 10px;
}

[class ^='chatReply'] {
    margin: 10px 0px;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
}

[class ^='chatReply'] img {
    margin-right: 10px;
    margin-left: -10px;
}

[class ^='chatReply'] table {
    border: 1px solid #F6F6F6;
    border-radius: 10px;
    border-collapse: separate !important;
    border-spacing: 0;
}

[class ^='chatReply'] table thead th {
    padding: 5px;
}

[class ^='chatReply'] table tbody tr:nth-child(odd) {
    background-color: #F6F6F6;
}

[class ^='chatReply'] table tbody td {
    padding: 5px;
}

[class ^='chatReply'] ol {
    padding-left: 15px;
    list-style-type: decimal;
}

[class ^='chatReply'] ol li {
    list-style-type: decimal;
}

[class ^='chatReply'] button {
    padding: 3px 10px;
    border: 1px solid #000000;
    border-radius: 5px;
    background: transparent;
    margin: 5px;
}

[class ^='chatReply'] .cardetails {
    /* padding: 10px; */
    border: 1px solid #F6F6F6;
    border-radius: 10px;
}

[class ^='chatReply'] .cardetails h3 {
    font-size: 16px;
    font-weight: 200;
    margin: 5px 0px;
    padding-left: 8px;
}

[class ^='chatReply'] .cardetails p {
    margin-bottom: 2px;
    padding-left: 8px;
}

[class ^='chatReply'] .cardetails img {
    width: 100%;
    border-radius: 10px 10px 0px 0px;
    margin-left: 0px;
}

[class ^='chatReply'] .cardetails button {
    padding: 5px 10px;
    border: 1px solid #000000;
    border-radius: 5px;
    background: transparent;
    margin: 8px;
    width: 92%;
}

.input-message {
    bottom: 10px;
    position: absolute;
    width: 100%;
    padding: 0px 10px;
    margin: 0px -15px;
}

.input-message .sendMessage {
    position: absolute;
    text-align: center;
    /* line-height: 30px; */
    /* font-size: 20px; */
    float: right;
    right: 5px;
    bottom: 0px;
    height: 46px;
    width: 48px;
    /* background-color: #FFBA00; */
    /* border-radius: 5px; */
    cursor: pointer;
    background-image: url('./sendButton.png');
    background-size: contain; /* Ensures the image covers the whole element */
    background-repeat: no-repeat;
}

.projecticon {
    width: 224px;
    height: 48px;
    margin: 0px 0px 0px 20px;
    min-width: 40%;
    display: flex;
}
.ChatLabel {
    margin-left: 12px;
    padding-top: 5px;
}
.ChatLabel span {
    color: #000000;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 20px;
}
.ChatLabel img {
    display: block;
}
.chatbotIcon {
    width: 108px;
    height: 119px;
    margin: 0px;
    min-width: 108px;
    margin-left: calc(50% - 54px);
    margin-top: 10px;
    text-align: center;
}
.chatbotText {
    margin-top: 14px;
    font-weight: 500;
    width: 100%;
    background:rgba(0, 129, 239, 0.05);
    color: rgba(0, 129, 239, 1);
    border-radius: 16px;
    line-height: 32px;
    text-align: center;
    font-family: "robotoregular" !important;
}
.chatHeading {
    line-height: 14px;
    font-weight: 400;
}

.chatHeading span {
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
}

.form-group label {
    font-size: 12px;
    margin: 0px 0px 5px 0px;
    color: #000000;
}

.form-group label .required {
    color: #FF3E3E;
}

.closeButton {
    background-image: url('./closechat_new.png');
    background-size: contain; 
    background-repeat: no-repeat;
    position: absolute;
    right: 15px;
    font-size: 26px;
    font-weight: 400;
    cursor: pointer;
    width: 32px;
    height: 32px;
}

.minButton {
    background-image: url('./minimise.png');
    background-size: contain; 
    background-repeat: no-repeat;
    position: absolute;
    right: 50px;
    font-size: 26px;
    font-weight: 400;
    cursor: pointer;
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

.assistantInput,
.userInput {
    font-size: 14px !important;
    line-height: 18px !important;
}

.assistantInput img {
    margin-right: 6px;
    margin-left: -10px;
}

.assistantInput li img {
    background: #ddd;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    max-width: 90%;
}

.chat-reply {
    display: flex;
    margin: 10px 0px;
    padding: 10px;
    border-radius: 10px;
}
.chat-reply span {
    background-color: rgba(245, 245, 245, 1);
    padding: 5px 9px;
    border-radius: 16px;
    width: 90%;
    word-wrap: break-word;
    border-radius: 0px 16px 16px 16px;
}

.chat-reply .cardetails img {
    width: 100%;
    border-radius: 10px;
    margin-left: 0px;
}

.chat-reply ol {
    padding-left: 10px;
}

.chat-reply ol li {
    line-height: 1.3;
    width: 100%;
    float: left;
    word-wrap: break-word;
    padding: 0px 5px;
    list-style: decimal;
}

.chat-reply button {
    padding: 3px 10px;
    border: 1px solid #000000;
    border-radius: 5px;
    background: transparent;
    margin: 5px;
}

.chat-reply .cardetails button {
    padding: 5px 10px;
    border: 1px solid #000000;
    border-radius: 5px;
    background: transparent;
    margin: 8px;
    width: 92%;
}

.chat-reply a {
    color: #000;
    text-decoration: underline;
}

.chat-reply a:hover {
    color: #000;
    text-decoration: none;
}

.input-message input {
    /* padding-right: 50px; */
    border-radius: 16px;
    height: 45px;
    width: calc(100% - 48px);
}

.chat-reply table {
    border: 1px solid #F6F6F6;
    border-radius: 10px;
    border-collapse: separate !important;
    border-spacing: 0;
}

.chat-reply table thead th,
.chat-reply table tbody td {
    padding: 5px;
}
@media(max-width: 767px) {
    .assistantInput li img {
        max-width: 200px;
    }

    .openChatsection {
        right: 0;
        margin: 10px;
        width: 90%;
        border-radius: 16px;
        height: 590px;
    }
    .showup {
        transform: translate(-10px, -600px);
    }
    .chatHeader {
        margin: 0px;
        width: 96%;
    }
    .chatcontentOuter {
        align-items: baseline;
    }
}

.firstLiElement {
    margin-top: 45px;
}

.chat-reply ol li a {
    color: rgba(0, 129, 239, 1);
}

.chat-reply .h3, h3, .h4, h4 {
    font-size: 16px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    line-height: 18px !important;
    font-weight: 500px !important;
}
#chatRegister input {
    border: 0;
    border-radius: 8px;
    background-color: #F5F5F5;
    box-shadow: none;
    color: #000000;
    height: 40px;
}
#chatRegister .form-group {
    margin-bottom: 16px;
}
#chatRegister .form-group label {
    /* color: #999999; */
    font-weight: 400;
}
#startChat {
    background-color: #0081EF;
}
#startChat:hover {
    border-color: #2e6da4;
}
.loader {
    margin-top: 10px;
}
.chatanswer {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% + 71px);
    margin-top: -71px;
    margin-left: -15px;
    background-color: rgba(0, 0, 0, 0.6);
    flex-direction: column;
} 
.loaderRepeat {
    width: 75px;
    height: 40px;
    color: #ffffff;
    text-align: center;
    padding-top: 50px;
    --g1:conic-gradient(from  90deg at left   3px top   3px,#0000 90deg,#fff 0);
    --g2:conic-gradient(from -90deg at bottom 3px right 3px,#0000 90deg,#fff 0);
    background: var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
    background-position: left,center,right;
    background-repeat: no-repeat;
    animation: l10 1s infinite alternate;
}

@keyframes l10 {
    0%,
    2%   {background-size:15px 50% ,15px 50% ,15px 50%}
    20%  {background-size:15px 25% ,15px 50% ,15px 50%}
    40%  {background-size:15px 100%,15px 25% ,15px 50%}
    60%  {background-size:15px 50% ,15px 100%,15px 25%}
    80%  {background-size:15px 50% ,15px 50% ,15px 100%}
    98%,
    100% {background-size:15px 50% ,15px 50% ,15px 50%}
  }
  
.loaderText {
    /* width: 115px; */
    height: 50px;
    color: #ffffff;
}
.loaderText::after {
    content: "Bot is Reading";
    animation: textChange 5s infinite;
}
@keyframes textChange {
    0% { content: "Bot is Reading"; }
    33% { content: "Bot is Analysing"; }
    66% { content: "Bot is Thinking"; }
    100% { content: "Bot is Answering"; }
}

#botPopimg {
    margin-top: -190px;
}
#botPopimg img {
    /* display: none; */
    width: 100px;
    -webkit-animation: bummer 2s;
    animation: bummer 2s;
    -webkit-transform: scale(1,1); 
    transform: scale(1,1);
    transform: translate(0px, 0px);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    margin-top: 20px;
}
@-webkit-keyframes bummer {
    100% {
        -webkit-transform: scale(1.5,1.5); 
    }
}

@keyframes bummer {
    50% {
        transform: translate(0px, 140px);
        transform: scale(1.5,1.5); 
    }
    100% {
        transform: scale(1,1); 
        transform: translate(0px, 0px);
    }
}
/* .zoomIn{
    display: inline-block !important;
    margin-top: 100px;
    transform: scale(2); 
    transition: transform .5s;
  }
.zoomOut {
    display: inline-block !important;
    margin-top: 0px;
    transform: scale(1);
} */
 .TextBlock {
    position: absolute;
    opacity: 0;
    -webkit-animation: slidein 1s ease-out 2s forwards;
       -moz-animation: slidein 1s ease-out 2s forwards;
         -o-animation: slidein 1s ease-out 2s forwards;
            animation: slidein 1s ease-out 2s forwards;
 }
 
@keyframes slidein {
    0% {
        opacity: 0;
        margin-top: -20px;
    }
    
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}
.errorText, .errorvalidtest {
    color: red;
    font-size: 12px;
    position: absolute;
}
.userIcon {
    background:rgba(135, 135, 135, 1);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
}
.userInputTexts {
    font-family: "robotoregular" !important;
    background: rgba(217, 237, 255, 1);
    border-radius: 16px 0px 16px 16px;
    margin-right: 6px;
    line-height: 18px;
    font-size: 14px;
    color: #000000;
    padding: 5px 9px;
    max-width: 70%;
    max-height: fit-content;
}
#botLandingText {
    text-align: center;
    width: 100%;
}
.chatcontentOuter {
    height: calc(100% - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94%;
}
.handwave {
    margin-top: -8px;
}
#output {
    margin-top: 20px;
}
#output p{
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
}
#output li {
    font-size: 12px;
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 15px;
    line-height: 20px;
    display: inline-block;
    padding: 2px 15px;
    width: 40%;
    word-break: break-all;
    margin: 2px 8px;
    color: rgba(153, 153, 153, 1);overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* max-width: 150px; */
    cursor: pointer;
}
.hiname {
    font-family: "robotomedium";
    color: rgba(153, 153, 153, 1);
    font-size: 22px;
    line-height: 25px;
    margin-top: 20px;
}
.chooseText {
    font-family: "robotomedium";
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    line-height: 16px;
    width: 80%;
    margin: 12px auto 0 auto;
}
.defaultQuestion {
    color: #000000;
    font-size: 22px;
    line-height: 25px;
    margin-top: 10px;
}
.vehicle-entry {
    width: calc(50% - 5px);
    border: 1px solid rgba(237, 237, 237, 1);
    background: #ffffff;
    margin-top: 10px;
    border-radius: 16px;
}
.vehicle-entry img {
    background-color: rgba(217, 217, 217, 1);
    border-radius: 16px 16px 0px 0px;
    padding: 4px;
    margin: 0;
    height: 90px;
    width: 100%;
}
span.chatcontent {
     display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

span.chatcontent ul {
    list-style-type: disc;
    padding-left: 15px;
}
span.chatcontent ul li {
    list-style-type: disc;
}
.vehicle-entry ul {
    list-style-type: none !important;
    padding: 8px 8px 5px 8px !important;
}
.vehicle-entry ul li {
    list-style-type: none !important;
    font-family: "robotoregular" !important;
    font-size: 12px;
    line-height: 16px;
    padding-bottom: 5px;
    color: rgba(51, 51, 51, 1);
    word-break: break-all;
}
.vehicle-entry ul li a {
    color: rgba(0, 129, 239, 1);
    font-size: 12px;
    line-height: 18px;
    text-decoration: underline;
    font-family: "robotomedium";
}
.vehicle-entry ul li a:hover, .vehicle-entry ul li a:active, .vehicle-entry ul li a:focus {
    color: rgba(0, 129, 239, 1);
    text-decoration: underline;
}
@media(min-width: 980px) {
    .openChatsection {
        max-width: 400px;
        height: 550px;
    }
}