﻿html, body {
    height: 100%;
    margin: 0;
}

.tm-bot__body div {
    border: none !important;
}

.tm-bot__header {
    background-color: #AD2531;
    color: #fff;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 40px);
    height: 44px;
    padding: 6px 20px;
}

.tm-bot__header-lft {
    display: flex;
}

.tm-bot__header-logotxt {
    background-color: transparent;
    font-family: 'Segoe UI', Arial, Tahoma, Verdana, sans-serif;
    font-size: 16px;
    margin-left: 5px;
}

.tm-bot__body {
    height: 100%;
    width: 100%;
}

.webchat__basic-transcript__scrollable {
    padding: 0px;
}

.webchat__stacked-layout__avatar-gutter {
    display: none;
}

.webchat__defaultAvatar--fromUser .webchat__imageAvatar__image {
    height: 20px !important;
    width: 20px !important;
    padding: 5px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(151, 151, 151, 0.25);
    box-shadow: 0px 3px 5px rgba(151, 151, 151, 0.45);
}

    .webchat__defaultAvatar--fromUser .webchat__imageAvatar__image img {
        width: 20px !important;
        height: 20px !important;
    }

.webchat--css-pbmkx-kj2sea.webchat__initialsAvatar:not(.webchat__initialsAvatar--fromUser),
.webchat--css-pbmkx-kj2sea.webchat__initialsAvatar.webchat__initialsAvatar--fromUser {
    background-color: transparent !important;
}

.ac-container.ac-adaptiveCard {
    padding: 0 !important;
    background-image: none !important;
}

.ac-actionSet {
    background-color: transparent;
}

    .ac-actionSet .style-default,
    .ac-actionSet .ac-pushButton {
        border-radius: 5px !important;
        color: #003146 !important;
        outline: none !important;
        font-family: 'Segoe UI', Arial, Tahoma, Verdana, sans-serif !important;
        font-size: 12px;
        font-weight: normal;
    }

        .ac-actionSet .ac-pushButton:hover {
            background-color: #003146 !important;
            color: white !important;
        }

.tm-bot__body .main {
    padding: 10px !important;
}

.ac-container .ac-input-container {
    margin-bottom: 10px !important;
}

    .ac-container .ac-input-container .ac-input.ac-multichoiceInput,
    .ac-container .ac-input-container .ac-input.ac-textInput,
    .ac-container .ac-input-container .ac-input.ac-multiline {
        padding: 10px 15px !important;
    }

    .ac-container .ac-input-container .ac-input.ac-multichoiceInput,
    .ac-input-container .ac-input.ac-textInput {
        min-height: 20px !important;
    }

    .ac-container .ac-input-container .ac-input.ac-multiline {
        min-height: 60px !important;
    }

@media (min-width:320px) and (max-width:767.98px) {
    .webchat__basic-transcript__scrollable {
        padding: 10px 5px;
        width: calc(100% - 10px) !important;
    }
}

/*--css for RTL--*/

html[dir="rtl"] .tm-bot__header,
html[dir="rtl"] .tm-bot__body * {
    direction: rtl;
}

html[dir="rtl"] .webchat__icon-button .webchat__send-icon {
    transform: scaleX(-1);
}

html[dir="rtl"] .ac-textBlock {
    text-align: right !important;
}

input.webchat__send-box-text-box__input {
    font-weight: 600;
}

.webchat__send-box-text-box__input:not(:disabled):not([aria-disabled="true"]) {
    font-size: 16px !important;
}

.chat-icon-box {
    width: 55px;
    height: 55px;
    background-color: transparent;
    border-radius: 50%;
}

    .chat-icon-box .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.notify {
    -webkit-animation: animSpin 5.8s ease-in-out forwards infinite, animFade 5.8s ease forwards infinite;
    animation: animSpin 5.8s ease-in-out forwards infinite, animFade 5.8s ease forwards infinite;
}

@-webkit-keyframes animSpin {
    0% {
        transform: perspective(120px) rotateY(181deg) rotateX(0deg);
    }

    50% {
        transform: perspective(120px) rotateY(0deg) rotateX(0deg);
    }

    100% {
        transform: perspective(120px) rotateY(181deg);
    }
}

@keyframes animSpin {
    0% {
        transform: perspective(120px) rotateY(181deg) rotateX(0deg);
    }

    50% {
        transform: perspective(120px) rotateY(0deg) rotateX(0deg);
    }

    100% {
        transform: perspective(120px) rotateY(181deg);
    }
}

@-webkit-keyframes animFade {
    0% {
        opacity: 0.95;
    }

    100% {
        opacity: 1;
    }
}

@keyframes animFade {
    0% {
        opacity: 0.95;
    }

    100% {
        opacity: 1;
    }
}

.tm-bot__body > div {
    background-color: transparent !important;
    font-size: 12px;
    font-family: 'Segoe UI', Arial, Tahoma, Verdana, sans-serif !important;
}

.webchat__basic-transcript__activity-box > div {
    margin: 0 !important;
}

.webchat__initialsAvatar {
    background-color: transparent !important;
}

#NewUserGreeting-container .ac-image {
    max-width: 54px !important;
    max-height: 54x !important;
}

/*Bot Landing Css*/

#chat-circle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 10000;
}

#chat-overlay {
    background: rgba(255,255,255,0.1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: none;
}


.chat-box {
    display: none;
    background: #efefef;
    position: fixed;
    right: 30px;
    bottom: 50px;
    width: 350px;
    max-width: 85vw;
    max-height: 100vh;
    border-radius: 5px;
    box-shadow: 0px 5px 35px 9px #ccc;
    z-index: 10000;
    font-family: 'Segoe UI', Arial, Tahoma, Verdana, sans-serif !important;
    font-size: 12px;
}

@media (max-width: 767px) {
    .chat-box {
        right: 15px;
        bottom: 15px;
    }
}

.head-right {
    display: flex;
    margin-top: 5px;
}

.chat-box-toggle {
    margin-right: 5px;
}

.language {
    display: flex;
    color: white !important;
    cursor: pointer;
}

.english, .spanish {
    height: 22px;
    padding-left: 25px;
    margin-left: 10px;
    background-size: 35%;
    color: white;
}

.spanish, .english {
    background-image: url(../images/globe.svg);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position-y: -1px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .spanish, .english {
        background-size: 50px;
        background-position-x: -10px;
    }
}

.spanish, .english {
    display: none;
}

.language img {
    margin-right: 8px;
    margin-left: 10px;
}

.bot-close {
    cursor: pointer;
    font-weight: bold;
    margin-left: 20px;
    background: transparent;
    color: white;
}

.chat-box-header {
    background: #AD2624;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
}

.chat-box-body {
    position: relative;
    height: auto;
    border: 1px solid #ccc !important;
    overflow: hidden;
}

    .chat-box-body:after {
        content: "";
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgOCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgY3g9IjE3NiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTIwLjUuNWwyMyAxMW0tMjkgODRsLTMuNzkgMTAuMzc3TTI3LjAzNyAxMzEuNGw1Ljg5OCAyLjIwMy0zLjQ2IDUuOTQ3IDYuMDcyIDIuMzkyLTMuOTMzIDUuNzU4bTEyOC43MzMgMzUuMzdsLjY5My05LjMxNiAxMC4yOTIuMDUyLjQxNi05LjIyMiA5LjI3NC4zMzJNLjUgNDguNXM2LjEzMSA2LjQxMyA2Ljg0NyAxNC44MDVjLjcxNSA4LjM5My0yLjUyIDE0LjgwNi0yLjUyIDE0LjgwNk0xMjQuNTU1IDkwcy03LjQ0NCAwLTEzLjY3IDYuMTkyYy02LjIyNyA2LjE5Mi00LjgzOCAxMi4wMTItNC44MzggMTIuMDEybTIuMjQgNjguNjI2cy00LjAyNi05LjAyNS0xOC4xNDUtOS4wMjUtMTguMTQ1IDUuNy0xOC4xNDUgNS43IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTg1LjcxNiAzNi4xNDZsNS4yNDMtOS41MjFoMTEuMDkzbDUuNDE2IDkuNTIxLTUuNDEgOS4xODVIOTAuOTUzbC01LjIzNy05LjE4NXptNjMuOTA5IDE1LjQ3OWgxMC43NXYxMC43NWgtMTAuNzV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjcxLjUiIGN5PSI3LjUiIHI9IjEuNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjE3MC41IiBjeT0iOTUuNSIgcj0iMS41Ii8+PGNpcmNsZSBmaWxsPSIjMDAwIiBjeD0iODEuNSIgY3k9IjEzNC41IiByPSIxLjUiLz48Y2lyY2xlIGZpbGw9IiMwMDAiIGN4PSIxMy41IiBjeT0iMjMuNSIgcj0iMS41Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTkzIDcxaDN2M2gtM3ptMzMgODRoM3YzaC0zem0tODUgMThoM3YzaC0zeiIvPjxwYXRoIGQ9Ik0zOS4zODQgNTEuMTIybDUuNzU4LTQuNDU0IDYuNDUzIDQuMjA1LTIuMjk0IDcuMzYzaC03Ljc5bC0yLjEyNy03LjExNHpNMTMwLjE5NSA0LjAzbDEzLjgzIDUuMDYyLTEwLjA5IDcuMDQ4LTMuNzQtMTIuMTF6bS04MyA5NWwxNC44MyA1LjQyOS0xMC44MiA3LjU1Ny00LjAxLTEyLjk4N3pNNS4yMTMgMTYxLjQ5NWwxMS4zMjggMjAuODk3TDIuMjY1IDE4MGwyLjk0OC0xOC41MDV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxwYXRoIGQ9Ik0xNDkuMDUgMTI3LjQ2OHMtLjUxIDIuMTgzLjk5NSAzLjM2NmMxLjU2IDEuMjI2IDguNjQyLTEuODk1IDMuOTY3LTcuNzg1LTIuMzY3LTIuNDc3LTYuNS0zLjIyNi05LjMzIDAtNS4yMDggNS45MzYgMCAxNy41MSAxMS42MSAxMy43MyAxMi40NTgtNi4yNTcgNS42MzMtMjEuNjU2LTUuMDczLTIyLjY1NC02LjYwMi0uNjA2LTE0LjA0MyAxLjc1Ni0xNi4xNTcgMTAuMjY4LTEuNzE4IDYuOTIgMS41ODQgMTcuMzg3IDEyLjQ1IDIwLjQ3NiAxMC44NjYgMy4wOSAxOS4zMzEtNC4zMSAxOS4zMzEtNC4zMSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4=');
        opacity: 0.1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        position: absolute;
        z-index: -1;
    }

.chat-logs {
    height: calc(100vh - 210px);
}

.webchat__basic-transcript__scrollable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 50px;
}

.webchat__basic-transcript__scrollable::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
    border-radius: 50px;
}

.webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb {
    background-color: #CB5031;
    border-radius: 50px;
}

.chatbot-title {
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.chat-logs iframe {
    border: 0;
    height: 100%;
    width: 100%;
}

.webchat__bubble__content {
    background-color: transparent !important;
    border: 0px !important;
}

    .webchat__bubble__content .markdown {
        background-color: rgba(173, 38, 36, 1);
        color: white;
        border-radius: 7px;
        min-height: 16px !important;
    }

    .webchat__bubble__content .plain {
        background-color: #003146 !important;
        color: white !important;
        border-radius: 7px !important;
        min-height: 16px !important;
    }

    .webchat__bubble__content .markdown p::before {
        content: '';
        position: absolute;
        right: -10px;
        top: 10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top: 0;
        left: 0px;
        border-right-color: #AD2624;
        border-left: 0;
    }

    .webchat__bubble__content .plain::after {
        content: '';
        position: absolute;
        top: 10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top: 0;
        right: 0px;
        border-left-color: #003146;
        border-right: 0;
    }

.ac-pushButton, .webchat__suggested-action__button {
    background-color: transparent !important;
    color: #003146 !important;
    border: 2px solid #003146 !important;
    cursor: pointer;
    border-radius: 5px !important;
    font-weight: 600 !important;
    font-size: 12px !important
}

    .webchat__suggested-action__button:hover {
        background-color: #003146 !important;
        color: white !important;
    }

.webchat__bubble__content #NewUserGreeting .ac-container {
    background-image: none !important;
    padding: 0px !important;
}

    .webchat__bubble__content #NewUserGreeting.ac-container .ac-textBlock p {
        padding: 0px !important;
        font-size: 15px !important;
        padding: 10px !important;
        line-height: normal !important;
        background-color: #003146 !important;
        color: #fff !important;
        width: inherit !important;
    }

img.vert-move {
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

img.vert-move {
    -webkit-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

#exitsurvey-header {
    background-color: transparent;
}

.tm-bot__body .webchat__stacked-layout__attachment {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #ccc !important;
    padding: 10px 10px 10px 0;
    border-radius: 5px;
    margin-bottom: 3px;
}

#exitsurvey-body .ac-columnSet .ac-selectable {
    flex: unset !important;
    cursor: pointer;
    margin: 10px 20px !important;
}

#exitsurvey-body img {
    width: inherit !important;
}

.webchat__bubble__content {
    min-height: inherit !important
}

.webchat__stacked-layout__status span span {
    display: none;
}

.webchat__stacked-layout__status span {
    padding-top: 0px;
}

    .webchat__stacked-layout__status span div {
        position: inherit !important;
        width: inherit;
        color: black;
        height: inherit;
        color: #666;
    }

.webchat__carousel-layout .webchat__bubble__content {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 10px !important;
}

button div {
    white-space: inherit !important;
}

#address .ac-horizontal-separator {
    display: none;
}

#address p {
    font-size: 12px
}

#address button {
    margin-top: 10px
}

#PIIFlaggedText {
    color: orange;
}

#addressLine, #adminDistrict, #postalCode, #office-phone {
    padding-left: 22px;
    position: relative;
}

    #addressLine p::before, #postalCode p::before, #office-phone p::before {
        content: "";
        opacity: 0.5;
        position: absolute;
        left: 0;
        top: 2px;
        width: 20px;
        height: 20px;
    }

    #addressLine p::before {
        background: url(../images/pin.svg) no-repeat;
        background-size: 60%;
    }

    #postalCode p::before {
        background: url(../images/zip.svg) no-repeat;
        background-size: 85%;
    }

    #office-phone p::before {
        background: url(../images/call.svg) no-repeat;
        background-size: 70%;
    }

#office-phone {
    margin-top: 10px;
}

    #office-phone p {
        font-weight: 500;
    }

.react-film__filmstrip__list {
    width: 70%;
}

#question p {
    white-space: normal
}

#officeName {
    margin-bottom: 8px;
    font-weight: bold !important;
}

    #officeName p a {
        color: #003146;
    }

#numberOfJobs {
    margin-bottom: 10px;
}

    #numberOfJobs p {
        margin-bottom: 10px;
        background: rgba(0, 49, 70, 0.1);
        padding: 3px 0px 3px;
        border-radius: 5px;
        font-weight: bold;
        color: darkslateblue;
        text-align: center;
    }

.webchat__suggested-actions--carousel-layout > div {
    background-color: white;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
}

.webchat__suggested-action__button {
    padding: 0 7px !important;
    height: 28px !important;
}

.webchat__suggested-actions--carousel-layout .react-film__filmstrip {
    margin: 0px 30px 0 30px;
}
/*
.webchat__bubble__content a {
    color: #fff;
}*/

.webchat__carousel-layout .webchat__bubble__content a {
    color: blue;
}

#faq .ac-textBlock p {
    min-height: 80px;
}

.violation {
    background-color: #e2e2e2;
    height: 50px;
    color: #857575;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border: 1px solid #ccc !important;
    font-family: 'Segoe UI', Arial, Tahoma, Verdana, sans-serif;
}

.blockimg {
    height: 20px;
    width: 20px;
    margin-right: 5px;
}

.violation svg {
    padding-left: 5px;
    fill: #857575 !important
}

#feedback-body img {
    cursor: pointer;
}

#feedback-body {
    margin: 15px !important;
}

    #feedback-body img {
        width: inherit !important;
    }

    #feedback-body .ac-container {
        flex: inherit !important;
    }

        #feedback-body .ac-container.ac-selectable {
            margin-right: 50px !important;
        }

    #feedback-body .ac-columnSet .ac-textBlock {
        cursor: pointer;
    }

.webchat__send-icon {
    cursor: pointer;
}
/* Force horizontal layout */
.ac-actionSet {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

/* Button sizing */
.ac-pushButton {
    min-width: 140px !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}

/* Prevent vertical stacking */
.ac-container {
    width: 100% !important;
    max-width: none !important;
}
.webchat__bubble[data-client="true"] {
    background-color: #ffe6e6;
    border-color: #ffb3b3;
}