.header{
    text-align: center;
    background-color: #3298dc;
    padding: 1px;
    border-radius: 4px;
    color:white;
    margin: 8px 2px;
}
.heading-div{
    /* background-color: lightgrey; */
    border-radius: 4px;
    padding:2px;
}
#chat-history{
    /* display: inline-flex; */
    height: 392px;
    top: 400px;
    right: 0%;
    width: 393px;
    /* z-index: 99; */
    opacity: 0.9;
    text-align:left;
    margin: 5px;
    padding: 3px;
    border: 1px solid black;
    background:white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    /* height: 750px;
    width: 350px; */
    position: absolute;
    /* right: 10px; */
    z-index: 999;
    display:none;
    flex-direction: column;
}
.chat-msgs{
    padding: 3px;
    overflow: scroll;
    margin-top: 0px;
    height: 225px;
}
.user-input{
    display: inline-flex;
    position: absolute;
    bottom: 5px;
    /* right: 20px; */
}
#usermsg{
    border-radius: 5px;
    width: 315px;
    height: 50px;
    background-color: #edeeef;
}
textarea {
    resize: none;
    font-size: 18px;
}
.details{
    border-radius: 4px;
    background-color: lightgrey;
    padding: 3px;
    text-align: center;
}
#send-btn{
    background-color:green;
    border-radius: 4px;
    border: 1px solid white;
    color:white;
    padding: 5px 7px;
    margin-left:5px;
    cursor: pointer;
}
#send-btn:hover{
    background-color:white;
    border: 1px solid green;
    color:green;
}
#attach-btn{
    background-color:white;
    border-radius: 4px;
    border: 1px solid #b37400;
    color:white;
    padding: 5px 7px;
    margin-left:5px;
}
#attach-btn:hover{
    background-color:white;
    border: 1px solid #ffae1a;
    color:#ffae1a;
}
#convo{
    display: grid;
}

.bubble:before, .bubble:after {
    border-radius: 20px / 10px;
    display: block;
    position: absolute;
}

.bubble:before {
    border: 10px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: -7px;
    z-index: -2;
}

.bubble:after {
    border: 8px solid transparent;
    border-bottom-color: rgb(237,238,240);
    bottom: 1px;
    left: -5px;
}

.bubble--alt:before {
    border-bottom-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px / 10px;
    left: auto;
    right: -7px;
}

.bubble--alt:after {
    border-bottom-color: rgb(206,221,242);
    border-radius: 20px / 10px;
    left: auto;
    right: -5px;
}

/* upload CSS */
.attach-modal{
    display: none;
    position: absolute;
    right: 12%;
}
.modal-content{
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 100%; 
    z-index: 999;
    border-radius: 5px;
}
.modal-head{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    background: grey;
    color: white;
    padding: 5px;
    border-radius: 3px;
}
.file{
    padding: 8px 0px;
}
.uploadNow{
    border-radius: 5px;
    color:white;
    background-color: #2793da;
    border: 1px solid #2285c6;
    cursor: pointer;
    text-decoration: none;
    padding: 5px 10px;
}
.uploadNow :hover{
    color: #2793da;
    background-color:white;
}
.closeModal{
    background-color: #e60000;
    border: 1px #b30000 solid;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    padding: 5px 10px;
}
.closeModal :hover{
    color: #e60000;
    background-color: white;
}
#closeChat{
    display: none;
    background-color: #e69500;
    border: 1px solid #b37400;
    color: white;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    height: 57px;
    width: 149px;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform-origin: bottom right;
    position: absolute;
    left: -150px;
    bottom: 158px;
}
#closeChat :hover{
    background-color: white;
    color: #e69500;
}
#openChat{
    display: none;
    background-color: #48c774;
    border: 1px #3abc67 solid;
    color: white;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    height: 57px;
    width: 149px;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform-origin: bottom right;
    position: absolute;
    left: -148px;
    /* top: 10px;
    right: 50px; */
}
#openChat :hover{
    background-color: white;
    color: #48c774;
    cursor: pointer;
}