.chatBut {
        text-decoration: none;
        padding: 5px 9px;
        background: #222;
        color: #fff;
        font-size: 18px;
        border-radius: 10px;
        border: 1px solid #222;
        position: fixed;
        bottom: 7px;
        right: 7px;
        z-index: 2;
        transition: .2s;
    }
    .chatBut:hover {
        background: #fff;
        color: #333;
        cursor: pointer;
    }
    
    .chatBox {
        background: #222;
        width: 400px;
        z-index: 3;
        position: fixed;
        bottom: 50px;
        /*right: 7px;*/
        border-radius: 10px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        transition: .2s;
    }
    #chatBox { 
        display: block;
        right: -200%;
    }
    .chatBox p{
        width: 90%;
        margin: 10px auto;
        text-align: center;
    }
    .chatBox .chatOutput{
        width: 90%;
        margin: 10px auto;
        text-align: justified;
        padding: 7px;
        background: #ddd;
        border-radius: 7px;
        box-sizing: border-box;
    }
    
    .chatBox .chatField{
        width: 90%;
        height: 100px;
        margin: 10px auto;
        display: table;
    }
    .chatBox .subChat{
        width: 90%;
        margin: 10px auto;
        display: table;
        padding: 7px 0px;
        text-align: center;
        background: #E50914;
        color: #fff;
        border-radius: 7px;
        border: 1px solid #E50914;
    }
    .chatBox .subChat:hover{
        background: #fff;
        color: #E50914;
        cursor: pointer;
    }
    
    @media screen and (max-width: 600px) {
        .chatBox {
            width: calc(100% - 21px);
        }
    }