body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif
}


@media only screen and (max-width: 1400px) {
    /* For tablets: */
    
    .child-container{
        width: 80% !important;
    }

  }

.container {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;

    background: #000428;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #004e92, #000428);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #004e92, #000428);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    display: flex;
    justify-content: center;


    .child-container {
        height: 90vh;
        width: 40%;
        background: whitesmoke;
        margin: auto;
        border-radius: 10px;
        overflow: hidden;

        box-shadow: 10px 10px 50px rgba(255, 255, 255, 0.4);

        .header {
            width: 100%;
            height: 10vh;
            text-align: center;
            background: lightblue;
            display: flex;
            justify-content: center;
        }

        .chat-whole-section {
            width: 85%;
            height: 80%;
            margin: auto;
            margin-top: 50px;

            .chat-section {
                width: 100%;
                height: 90%;
                overflow-y: scroll;

                .messages {
                    height: auto;
                    padding: 20px;
                    background: rgba(0, 255, 0, 0.2);
                    margin-top: 30px;
                    margin-bottom: 30px;
                    width: 70%;
                    float: left;
                    box-shadow: 0px 0px 2px black;
                    border-radius: 10px;

                    margin-left:10px ;


                    .message-created-at {
                        font-size: small;
                        font-family: monospace;
                    }

                }

                .messages.self {
                    float: right;
                    margin-right    :10px ;
                }

            }

            .message-control-section {
                width:100%;
                height:5vh;
                margin-top:20px;

                .message-input-section{
                    width:75%;
                    float:left;
                    height:100%;

                    input[type='text']{
                        width:100%;
                        height:100%;
                        float:left;
                        outline:none;
                        border:none;
                        border-bottom:2px solid black;
                        background: transparent;
                        margin-top: -10px;
                        font-size: 20px;
                    }

                }
                .message-send-section{
                    /* background: gray; */
                    width:20%;
                    float:right;
                    height:100%;

                    button{
                        height:100%;
                        width:100%;
                        cursor: pointer;
                        background: linear-gradient(to right, #004e92, #000428);
                        color:white;
                        border-radius: 10px;
                        outline: none;

                    }

                }

            }

        }




    }

}