/*Primeira tela - Inscrição do usuário*/

.StartChat {
    background-color:lightblue;
    width: 300px;
    position: fixed;
    bottom: 0px;
    right: 5%;
    border-radius: 10px 10px 0 0;
    transition: height 2s;
    height: 22px;
    transition-timing-function: ease-out;
    padding:0 2px 0 2px;
}
.StartChat input[type=text]{width:294px;}
.StartChat:hover {
        height: 300px;
    }

.TittleBar {
    font-size: inherit;
    font-weight: bolder;
    padding: 4px;
    height:22px;
    text-align:left;
}

.ChatButton {
    width:100px;
    border-color: #ADD8E6;
    border-radius: 5px;
    background-color: #ADD8E6;
}
.Explanation{font-size:smaller;}

/*Segunda tela - Espera*/
.ChatTalk{
    background-color:lightblue;
    width: 300px;
    position: fixed;
    bottom: 0px;
    right: 5%;
    border-radius: 10px 10px 0 0;
    height: 22px;
    padding:0 2px 0 2px;
    transition: height 1s;
    transition-timing-function: ease-out;
}

.WaitingClock{font-size:x-large;font-weight:bold;}
.WaitDiv{text-align:center;margin-top:50px;}
/*Terceira tela - Chat em si*/

.MessagePanel {
    width: 100%;
}

    .MessagePanel table {
        width: 100%;
        margin-top:5px;
    }

    .MessagePanel textarea {
        width: 294px;
        height: 29px;
        resize:none;
        overflow:hidden;
    }

.ClosingDiv{
    float:right;
    background-color:transparent;
    height:22px;
    width:22px;
    border-radius:0 10px 0 0;
    text-align:center;
    vertical-align:middle;
}
.ClosingDiv img{vertical-align:middle;}

.typingmessage {
    font-size: smaller;
    font-weight: lighter;
}

.talkwrapper {
    overflow: auto;
    width: 294px;
    height: 150px;
    background-color: #E9EAED;
    padding: 2px;
    border: 1px solid #C6C6C6;
    border-radius: 10px;
}

.bubblewrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    padding: 2px 0 2px 0;
}

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */
.bubble {
    position: relative;
    padding: 3px;
    border: 1px solid #C6C6C6;
    color: #333;
    background: #fff;
    border-radius: 6px;
    max-width: 90%;
    font-size: smaller;
}

    /* Variant : for left positioned triangle
------------------------------------------ */

    .bubble.left {
        margin-left: 6px;
        background-color: #dbedfe;
        float: left;
    }

    /* Variant : for right positioned triangle
------------------------------------------ */

    .bubble.right {
        float: right;
        margin-right: 6px;
    }

    /* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

    .bubble:before {
        content: "";
        position: absolute;
        bottom: -20px; /* value = - border-top-width - border-bottom-width */
        left: 40px; /* controls horizontal position */
        border-width: 20px 20px 0;
        border-style: solid;
        border-color: #5a8f00 transparent;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

    /* creates the smaller  triangle */
    .bubble:after {
        content: "";
        position: absolute;
        bottom: -13px; /* value = - border-top-width - border-bottom-width */
        left: 47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
        border-width: 13px 13px 0;
        border-style: solid;
        border-color: #fff transparent;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

    /* Variant : left
------------------------------------------ */

    /* creates the larger triangle */
    .bubble.left:before {
        top: 5px; /* controls vertical position */
        bottom: auto;
        left: -6px; /* value = - border-left-width - border-right-width */
        border-width: 6px 6px 6px 0;
        border-color: transparent #C6C6C6;
    }

    /* creates the smaller  triangle */
    .bubble.left:after {
        top: 7px; /* value = (:before top) + (:before border-top) - (:after border-top) */
        bottom: auto;
        left: -4px; /* value = - border-left-width - border-right-width */
        border-width: 4px 4px 4px 0;
        border-color: transparent #dbedfe;
    }

    /* Variant : right
------------------------------------------ */

    /* creates the larger triangle */
    .bubble.right:before {
        top: 5px; /* controls vertical position */
        bottom: auto;
        left: auto;
        right: -6px; /* value = - border-left-width - border-right-width */
        border-width: 6px 0 6px 6px;
        border-color: transparent #C6C6C6;
    }

    /* creates the smaller  triangle */
    .bubble.right:after {
        top: 7px; /* value = (:before top) + (:before border-top) - (:after border-top) */
        bottom: auto;
        left: auto;
        right: -4px; /* value = - border-left-width - border-right-width */
        border-width: 4px 0 4px 4px;
        border-color: transparent #fff;
    }
/*Quarta tela - Avaliação*/
.ChatEmotion{width:18%;}
.ChatEmotions {text-align:center;margin-top:50px;}