:root {
    --their-text-color: #555;
    --my-text-color: #1982FC;
    --body-color: #111;
    --footer-color: #171717;
    --text-message-color: #333;    
}
.content-container {
    overflow-y: auto;
    overflow-x: hidden;
}
.chat {
    position: relative;
    width: 100vw;
    height: .1vh;
    color: #FFF;
}
.chat-now-container {
    visibility: hidden;
    position: absolute;
    background-color: rgba( 10,23,52,.72);
    bottom: 0;
    top: 0;
    height: 100vh;
    z-index: 999;
}
.chat-header {
    text-align: center;
    font-size: 4vh;
}
.chat-body {
    background-color: var(--body-color);
    color: #FFF;
    width: 100vw;
}
.chat-now-messages {
    width: 100vw;
    height: 78vh;
    padding-top: 2vh;
}
.chat-now-message {
    width: 33vw;
    height: 4vh;
    font-size: 2vh;
    border-radius: 2vh;
    background-color: var(--their-text-color);
    padding: .5vh 0 0 .75vw;
    margin-left: .4vw;
}
.chat-now-message.my-message {
    float: right;
    background-color: var(--my-text-color);
    margin-right: 0.4vw;
}
.left-point {
	transform-origin: left bottom;
    width: .4vw;
    border: .36vw solid var(--their-text-color);
    margin: -1.4vh 0 0 1.3vh
}
.right-point {
    width: .4vw;
    border: .36vw solid var(--my-text-color);
    margin: 2.5vh 0 0 98.7vw;
}
.chat-footer {
    display: flex;
    width: 100vw;
    height: 7vh;
    background-color: var(--footer-color);
    color: #FFF;
    border-top: .1vh solid var(--their-text-color);
}
.chat-input {
    width: 90vw;
    height: 4vh;
    background-color: var(--text-message-color);
    border-radius: 2vh;
    border: .1vh solid var(--their-text-color);
    font-size: 3vh;
    margin: 0.75vh 0 0 3.33vw;
    padding: 0 0 0 1vw;
}
.chat-input.enter {
    width: 3vw;
    padding: 0 0 4vh 1vw;
    margin: 0.75vh;
    cursor: pointer;
}
.chat-input:valid {
    border: .1vh solid var(--their-text-color);
}
.chat-now-submit {
    margin-right: auto;
}

/** chat button on main page **/

.chat-now-button {
    visibility: visible;
    position: fixed;
    height: 6vh;
    width: 10vw;
    bottom: 0;
    top: 80vh;
    left: 0;
    background: orangered;
    border-radius: 0 5vw 5vw 5vw;
    padding: 1vh 0 0 0;
    color: #FFF;
    font-family: "Lato";
    font-size: 2.4vh;
    text-align: center;
    z-index: 999;
}
.users-container {
    position: absolute;
    color: #FFF;
    width: 100%;
    top: 8vh;
}
.user-name {
    background: #333;
    width: 100%;
    height: 5vh;
    border: 1px solid #000;
    text-align: center;
    padding: 2vh 0;
    font-size: 4vh;
}