/* Override bootstrap */

html, body {
    
    width: 100%;
    height: 100%;
    background-color: #4f4f4f;
}

.row {
    
    flex-wrap: nowrap !important;
}

/* Fonts */

.sender {
    
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 10px;
    padding-left: 5px;
}

.message {
    
    color: #fff;
    font-size: 1.2em;
    padding-right: 3px;
}

.light-text {
    
    color: #fff;
    font-size: 1em;
}

/* Styling */

.wrapper {
    
    width: 100%;
    margin: 0 auto;
}

.container-fluid {
    
    padding: 0;
    margin: 0;
}

.row {
    
    padding: 0;
    margin: 0;
}

.chat-holder {
    
    padding: 0;
    margin: 0;
}

.main-panel {
    
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 84%;
    position: fixed;
    width: 77%;
}

.input-wrapper {
    
    width: 100%;
    height: 12%;
    z-index: 99;
    background-color: #6f6f6f;
    
    position: fixed;
    bottom: 0;
    margin: 0;
    padding: 0;
}

.enter-button {
    
    width: 15%;
    margin-left: 5px;
    position: absolute;
    height: 85%;
    margin-top: 5px;
}

.text-input {
    
    width: 60%;
    height: 85%;
    margin-top: 5px;
    margin-left: 5px;
    background-color: #a4a4a4;
}

.panel {
    
    background-color: #3f3f3f;
    height: 100%;
    position: fixed;
    margin: 0;
    padding: 0;
}

.dark {
    
    background-color: #4f4f4f;
}

.row:nth-child(even) {
    
    background-color: #5f5f5f;
}