html, body {
    height: 100%;
    background-color: transparent;
}

#main-container {
}

#chat-container {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: whitesmoke;
    flex-flow: column;
}

#start-chat {
    display: none;
    width: 85px;
    height: 85px;
    position: absolute;
    bottom: 0;
    right: 0;
}

#startChatBtn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #111138;
    color: white;
}

#my-botui-app * {
    box-sizing: content-box;
}

#my-botui-app {
    width: 100%;
}

.welcome-header-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    padding: 0.5rem;
    background-color: #fff;
}

.agent-header-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 5rem;
    padding: 0.5rem;
    border-top: 1px solid #5b5b5b1a;
    box-shadow: 0 4px 2px -2px gray;
    background-color: #fff;
}

.chat-row {
    flex: 1 1 auto;
    overflow: auto;
    /*height: calc(100% - 58px - 8rem);*/
}

h6 {
    margin: 0;
    color: #111138;
    font-weight: bold;
}

.send-message-input {
    border: none;
    resize: none;
    overflow-y: auto;
    min-height: 60px;
    max-height: 80px;
}

.form-control:focus {
    border-color: #00000029;
    box-shadow: none;
}

.input-btn {
    color: #5b5b5b;
}

#sendbutton, #preChatSurveyBtn {
    color: #063BF8;
    /*border-color: #063BF8;*/
}

#sendbutton:focus {
    box-shadow: none;
}

.welcomeBtn {
    border: none;
    color: #111138;
    font-size: 1rem;
    line-height: 0;
    padding-top: 0;
}

.welcomeBtn:hover {
    color: #063BF8;
}

.welcomeBtn:focus {
    color: #063BF8;
    box-shadow: none;
}

#volume-up {
    position: absolute;
    left: 0.5rem;
}

#transcript {
    position: absolute;
    left: 2.7rem;
}

#minimizeBtn {
    position: absolute;
    right: 2.7rem;
}

#closeBtn {
    position: absolute;
    right: 0.5rem;
}

.pre-chat-survey-box {
    margin: 15% auto;
    width: 85%;
}

.pre-chat-survey-box label {
    margin-bottom: 0.2rem;
}

.card-header {
    background-color: #fff;
    box-shadow: 3px 0px 8px #00000029;
}

.card-body {
    padding: 0.75rem 1.25rem 1.25rem;
    box-shadow: 3px 3px 6px #00000029;
}

.botui-container, .z-bg-light-blue {
    background-color: #EAEEF3;
    box-shadow: inset 1px 4px 9px -6px;
}

/* .botui-messages-container {
}

.botui-actions-container {
}

.botui-message {

} */

/*.botui-message-content.human.text {*/
/*    background-color: #063BF8;*/
/*    color: #fff;*/
/*}*/


/*.botui-message-content.text {*/
/*    background-color: #fff;*/
/*    color: #000;*/
/*}*/

/* .botui-message-content.embed {
} */

.botui-message-content.loading {
    background-color: #fff;
}


/* .botui-message-content-link {
}

.botui-actions-text-input {

}

.botui-actions-text-submit {

}

.botui-actions-buttons-button {

} */

/*.botui-message-content {*/
/*    word-break: break-all;*/
/*}*/

.time {
    min-height: auto;
    margin-bottom: 2px;
}

.time .botui-message-content.text {
    background-color: transparent;
    color: #707070;
    font-size: 0.625rem;
    padding: 0%;
}

.custom-message {
    margin-top: 0;
}

.typing-indicator-message {
    margin-top: 0;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0);
}

#emoji-tooltip {
    position: absolute;
    inset: calc(100% - 468px) auto auto 0px;
    margin: 0px;
    transform: translate(0px, 29px);
    opacity: 1 !important;
}

#file-sender-input {
    visibility: hidden;
    display: none;
}

p {
    color: red;
    font-size: 3em;
    margin: 0;
    text-transform: text; /* proposed */
    font-variant-emoji: text; /* proposed */
    font-variant-color: monochrome; /* proposed */
    font-color: monochrome; /* proposed */
    font-palette: dark; /* drafted for CSS Fonts Level 4 */
}

p.hack {
    color: rgba(100%, 0%, 0%, 0);
    text-shadow: 0 0 0 red;
}

p.font {
    font-family: Emojione, Noto, Twemoji, Symbola;
}

@font-face {
    /* http://emojione.com/developers/ */
    font-family: Emojione;
    src: local("EmojiOne BW"), local("EmojiOne"), local("Emoji One"),
        /*   https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-bw.otf – monochrome only, deprecated, removed
             https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-android.ttf – with hack
             https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-apple.ttf – with hack */ url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2") format("woff2"),
    url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff") format("woff"),
    url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.otf") format("truetype");
}

@font-face {
    /* https://www.google.com/get/noto/#noto-emoji-zsye */
    font-family: Noto;
    src: local("Noto Emoji"), local("Noto Color Emoji"), local("Noto"),
    url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");
}

@font-face {
    /* https://github.com/eosrei/twemoji-color-font/releases */
    font-family: Twemoji;
    src: local("Twemoji");
}

@font-face {
    /* http://users.teilar.gr/~g1951d/ */
    font-family: Symbola;
    src: local("Symbola");
}

i.fas,
i.fab {
    border: 1px solid red;
}

.botui-container {
    overflow-y: scroll;
}

/* scrollbar width */
.botui-container::-webkit-scrollbar {
    width: 5px;
}

/* scrollbar track */
.botui-container::-webkit-scrollbar-track {
    background: #eee;
}

/* scrollbar handle */
/*.botui-container::-webkit-scrollbar-thumb {*/
/*    !*border-radius: 1px;*!*/

/*    background: #1a4e9b; !* Old browsers *!*/
/*    background: -moz-linear-gradient(top, #063BF8 0%, #063BF8 100%); !* FF3.6-15 *!*/
/*    background: -webkit-linear-gradient(top, #063BF8 0%,#063BF8 100%); !* Chrome10-25,Safari5.1-6 *!*/
/*    background: linear-gradient(to bottom, #063BF8 0%,#063BF8 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
/*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a4e9b', endColorstr='#003871',GradientType=0 );*/
/*}*/
.st0 {
    fill: #063BF8;
    stroke: #063BF8;
    stroke-width: 1.174;
    stroke-miterlimit: 10;
}

.powered-label {
    background: lightgrey;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.powered-label-text {
    text-align: center;
}

.powered-label-text a {
    text-align: center;
    color: #495057;
    font-size: 0.85rem;
    margin: 0;
}

.flex {
    display: flex !important;
}

.flex-0 {
    flex: 0 0 auto !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.h-10 {
    height: 2.5rem !important;
}

.w-10 {
    width: 2.5rem !important;
}

.agent-avatar {
    border: 3px solid #063BF8;
}

.fuse-card {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 1rem;
}

#eye-catcher {
    display: none;
    background: #063BF8;
    border-radius: 1rem;
    position: absolute;
    bottom: 100px;
    right: 10px;
    -webkit-box-shadow: 1px 1px 7px 0px #000000;
    box-shadow: 1px 1px 7px 0px #000000;
}

.w-full {
    width: 100% !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.max-w-80 {
    max-width: 20rem !important;
}

.text-2xl {
    font-size: 1.25rem !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.text-md {
    font-size: 0.8125rem !important;
}

.flex-col {
    flex-direction: column !important;
}

#faVolumeMute {
    display: none;
}

.modal {
    margin: 1rem;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    border-radius: 0.5rem;
    width: calc(100% - 2rem); /* Full width */
    height: calc(100% - 2rem); /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

/* The Close Button */
.close {
    color: #111138;
    float: right;
    font-size: 20px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    color: white;
    border: none;
}

.modal-body {
    padding: 2px 16px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.w-16 {
    width: 4rem !important;
}

.h-16 {
    height: 4rem !important;
}

.font-small {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-gray-200 {
    color: #888;
}

w-100 {
    width: 100%;
}

#no-agents-form, #no-agents-header {
    border-top: 1px solid #5b5b5b1a;
    box-shadow: 0 4px 2px -2px grey;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    background-color: #fff
}

.form-text-area {
    min-height: 70px;
}

#no-agents-form {
    height: calc(100% - 100px);
}