:root {
    --darkBlack: black;
    --darkWhite: white;
    --secondaryBlack: #141414;
    --tertiaryBlack: #1f1f1f;
    --teamsPurple: #2f2f48;
}

body {
    color: white !important;
}

.chat-online {
    color: #34ce57
}

.chat-offline {
    color: #e4606d
}

.chat-messages {
    display: flex;
    flex-direction: column;
    max-height: 800px;
    overflow-y: scroll
}

.chat-message-left,
.chat-message-right {
    display: flex;
    flex-shrink: 0
}

.chat-message-left {
    margin-right: auto
}

.chat-message-right {
    flex-direction: row-reverse;
    margin-left: auto
}
.py-3 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}
.px-4 {
    padding-right: 1.5rem!important;
    padding-left: 1.5rem!important;
}
.flex-grow-0 {
    flex-grow: 0!important;
}
.border-top {
    border-top: none !important;
}

.content {
    background-color: var(--darkBlack);
    background-size: cover;
    padding-bottom: 50px;
}

h1 {
    color: var(--darkWhite);
    text-shadow: rgb(165, 165, 162) 2px 2px 2px;
    text-align: center;
    padding: 10px 0;
}

#leftColumn {
    background-color: var(--secondaryBlack);
    border-right: solid 5px var(--darkBlack);
}

#navigation {
    background-color: var(--secondaryBlack);
}

#window {
    background-color: var(--tertiaryBlack);
}

#footer {
    background-color: var(--secondaryBlack);
}

.border-bottom {
    border-bottom: none !important;
}

.card{
    min-height: 100%;
    --bs-card-border-width: none !important;
    --bs-card-border-color: none !important;
    --bs-card-border-radius: none !important;
    background-color: var(--darkBlack);
}

.bg-light {
    background-color: var(--teamsPurple) !important;
}

.list-group-item {
    display: block;
    padding: 10px 0;
}

#topG {
    background-color: var(--darkBlack) !important;
    color: var(--darkWhite) !important;
    transition: 0.25s;
}

#topG:hover {
    border: solid 1px yellow !important;
    background-color: gray !important;
    transition: 0.4s;
}

input {
    background-color: var(--tertiaryBlack) !important;
    border: none !important;
}

.list-group-item:first-child {
    outline: none !important;
}

.form-control {
    color: white !important;
    transition: none !important;
    outline: none !important;
}

.form-control:focus {
    box-shadow: none !important;
}

/* scrool*/
html {
    scrollbar-face-color: #646464;
    scrollbar-base-color: #646464;
    scrollbar-3dlight-color: #646464;
    scrollbar-highlight-color: #646464;
    scrollbar-track-color: #000;
    scrollbar-arrow-color: #000;
    scrollbar-shadow-color: #646464;
    scrollbar-dark-shadow-color: #646464;
}
  
  ::-webkit-scrollbar { width: 8px; height: 3px;}
  ::-webkit-scrollbar-track {  background-color: var(--tertiaryBlack);}
  ::-webkit-scrollbar-track-piece { background-color: var(--tertiaryBlack);}
  ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
  ::-webkit-scrollbar-corner { background-color: #646464;}
  ::-webkit-resizer { background-color: #666;}