/*There are a total of 5 colors*/
:root {
    --gts-blue: #23A8E0;
    --light-dark: #ffffff;
    --dark: #343A40;
    --darker: #2c2f33;
    --darkest: #23272a;
}

/*Global*/
[data-theme="dark"] {
    background-color: var(--darker) !important;
    color: var(--light-dark);
}

[data-theme="dark"] .bg-light {
    background-color: var(--darker) !important;
    color: var(--light-dark);
}

[data-theme="dark"] .bg-white {
    background-color: var(--darkest) !important;
}

[data-theme="dark"] .bg-dark {
    color: var(--light-dark);
}

/*navbar*/
[data-theme="dark"] .navbar-light {
    background-color: var(--darkest) !important;
}

[data-theme="dark"] .nav-link {
    color: var(--light-dark) !important;
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--gts-blue);
}

[data-theme="dark"] div.dropdown-menu {
    color: var(--light-dark) !important;
    background-color: var(--darkest) !important;
}

[data-theme="dark"] a.dropdown-item {
    color: var(--light-dark) !important;
    background-color: var(--darkest) !important;
}

[data-theme="dark"] .btn-primary {
    color: var(--light-dark) !important;
}

[data-theme="dark"] a:active {
    color: var(--gts-blue) !important;
}

/*Server browser*/
[data-theme="dark"] tr {
    background-color: var(--darker) !important;
}

[data-theme="dark"] th {
    color: var(--light-dark) !important;
}

[data-theme="dark"] tbody {
    color: var(--light-dark) !important;
}

/*profile*/
[data-theme="dark"] #user-emoji-chooser {
    color: var(--light-dark) !important;
}


[data-theme="dark"] div.emoji-div {
    border-color: var(--darkest) !important;

    background-color: var(--dark) !important;
}

/*join/create room forms*/
[data-theme="dark"] input.form-control {
    color: var(--light-dark) !important;
    background-color: var(--darker) !important;
}

[data-theme="dark"] select.form-control {
    color: var(--light-dark) !important;
    background-color: var(--darker) !important;
}

[data-theme="dark"] .page-item.disabled .page-link {
    color: var(--light-dark) !important;
    background-color: var(--darker) !important;
}

/*game room*/
[data-theme="dark"] div.emote {
    color: var(--light-dark) !important;
    background-color: var(--darker) !important;
}

[data-theme="dark"] div.intercom-composer-popover {
    color: var(--light-dark) !important;
    background-color: var(--dark) !important;
}

[data-theme="dark"] div.intercom-emoji-picker-group-title {
    color: var(--light-dark) !important;
    background-color: var(--dark) !important;
}

[data-theme="dark"] div.song-content {
    color: var(--light-dark) !important;
    background-color: var(--darker) !important;
}

[data-theme="dark"] div.modal-content {
    color: var(--light-dark) !important;
    background-color: var(--dark) !important;
}

[data-theme="dark"] #game_room_content {
    background-color: var(--darker) !important;
}

/*current player song playing rosie*/
[data-theme="dark"] div.bg-secondary {
    background-color: var(--darker) !important;
    border-color: var(--darkest) !important;
}

[data-theme="dark"] div.img-thumbnail {
    background-color: var(--dark) !important;
    border-color: var(--darkest) !important;
}

/*player card*/
[data-theme="dark"] li.list-group-item {
    color: var(--light-dark) !important;
    background-color: var(--dark) !important;
    border-color: var(--darkest) !important;
}

[data-theme="dark"] div.row {
    border-color: var(--darkest) !important;
}

[data-theme="dark"] div.col {
    border-color: var(--darkest) !important;
}