:root {
    --text-color:#127ba3;
    --bg-color: #EDF0F1;
    --link-color: #127ba3;
    --link-color-rgb: 51, 122, 183;
    --link-hover-color: #0d5875;
}

body {
    font-family: 'Boogaloo', sans-serif !important;
    background-color: var(--bg-color);
}

body {
    color: var(--text-color);
}

.header-logo {
    max-width: 70px;
    top: -6px;
    position: relative;
}

.container > .content {
    min-height: 300px;
}

a,
.btn-link,
.btn-outline-info {
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
.btn-link:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.btn-outline-info {
    border-color: var(--link-color);
}

.btn-primary,
.btn-outline-info:hover {
    border-color: var(--link-color);
    background-color: var(--link-color);
}

.btn-primary:hover {
    border-color: var(--link-hover-color);
    background-color: var(--link-hover-color);
}

.text-line-through {
    text-decoration: line-through;
}

.form-control:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--link-color-rgb), .25)
}

.header-icon i {
    font-size: 0.6em;
}

.nav-arrow {
    position: absolute;
    font-size: 400%;
    max-width: 5%;
    z-index: 10;
}

.go-left {
    top: 45%;
    left: 5%;
}

.go-right {
    top: 45%;
    right: 5%;
}

.btn.btn-sm {
    border-radius: 4px 12px;
}

.material-icons.inherit-size {
    font-size: inherit;
}

.chat {
    margin: auto;
    width: 80%;
}

@media screen and (min-width: 1200px) {
    .chat {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 10px;
    }
}

.chat-column {
    margin-bottom: 20px;
    padding: 20px;
    background-color: rgba(var(--link-color-rgb), 10%);
    border-radius: 10px;
}

.chat-msgs {
    height: 25em;
    overflow: scroll;
    overflow-x: hidden;
    margin-bottom: 20px;
}

.chat-msg {
    width: 80%;
    padding: 10px;
    margin: 10px 10px;
    background-color: var(--link-color);
    color: #fff;
    text-align: left;
}

.chat-msg a {
    color: #fff;
}

.chat-msg a:hover {
    color: var(--link-hover-color);
}

.chat-msg p {
    margin: 0;
}

.chat-msg-self {
    border-radius: 10px 10px 2px 10px;
    margin-left: 18%;
}

.chat-msg-other {
    border-radius: 10px 10px 10px 2px;
}

.chat-author {
    font-size: small;
}

.chat-time {
    font-size: x-small;
    text-align: right;
}