@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@100;300;700&display=swap');

:root {
    --bg-tone-0: #111111ee;
    --bg-tone-1: #111111dd;
    --bg-tone-2: #222222dd;
    --bg-tone-3: #333333dd;
    --text: #eee;
    --text-dim: #aaa;
    --text-low: #777;
    --accent-tone-1: #1d1959;
    --accent-tone-2: #363377;
    --accent-tone-3: #6966a5;
    --action-tone-1: #009688;
    --action-tone-2: #267257;
    --action-tone-3: #478e75;
    --green: #3da;
    --yellow: #da3;
    --red: #b46;
    --away-grey: #aad;
    --alt-tone-1: #10759f;
    --alt-tone-2: #7428ad;
}

a {
    color: var(--accent-tone-3);
}
a.action {
    color: var(--text);
}

body {
    background: url('/bg-2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: var(--text);
    font-family: 'Oxygen', sans-serif;
    margin: 0;
    padding-bottom: 20rem;
}

button {
    font-family: 'Oxygen', sans-serif;
}

.ml-modal {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-tone-0) !important;
    padding: 5rem !important;
}

.ml-modal > *, .col > * {
    margin-bottom: 0.5rem;
}
.ml-modal .row {
    display: flex;
    flex-direction: row;
}
.ml-modal .col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ml-modal h2 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.demo-av {
    height: 10rem;
    width: 10rem;
    margin-right: 1rem;
}

.link {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--action-tone-3);
}
.link:hover {
    text-decoration: none;
    background-color: var(--action-tone-2);
    cursor: pointer;
}

.mega, .lan {
    display: inline;
}

.mega {
    font-weight: 100;
}

.main-heading {
    display: inline-block;
    margin: 1rem;
    margin-bottom: 3rem;
    padding: 1rem;
    background-color: var(--bg-tone-1);
    position: absolute;
    left: 1rem;
    top: 1rem;
}

.my-status {
    margin: 1rem;
    margin-bottom: -2rem;
    padding: 1rem;
    background-color: var(--bg-tone-1);
    float: right;
}

.my-status .name {
    text-align: center;
}

@media screen and (max-width: 767px) {
    .my-status {
        margin-top: 7rem;
        margin-bottom: 0.5rem;
    }
    .player-preview {
        display: none;
    }
    .text-filter {
        display: none;
    }
    /* .ml-break {
        flex-basis: 100%;
        height: 0;
    } */
}

.statuses {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.statuses a {
    padding: 1rem;
    width: 5rem;
    text-align: center;
}

.statuses .name {
    display: inline-block;
    margin-bottom: 0.5rem;
    border: solid 0px;
    border-bottom-width: 1px;
    padding-bottom: 4px;
}
.active .name, .statuses > a:hover > .name {
    border-bottom-width: 5px;
    padding-bottom: 0;
}

.player .avatar.seen-ages-ago {
    border-style: dashed;
}

.free .name, .free:hover .name, .player.free .name, .player.free .avatar, .ml-tooltip.free {
    border-color: var(--green);
}
.soon .name, .soon:hover .name, .player.soon .name, .player.soon .avatar, .ml-tooltip.soon {
    border-color: var(--yellow);
}
.busy .name, .busy:hover .name, .player.busy .name, .player.busy .avatar, .ml-tooltip.busy {
    border-color: var(--red);
}
.away .name, .away:hover .name, .player.away .name, .player.away .avatar, .ml-tooltip.away {
    border-color: var(--away-grey);
}

.statuses .desc {
    color: var(--text-low);
}

.statuses .active.free .desc, .ml-tooltip.free .st {
    color: var(--green);
}
.statuses .active.soon .desc, .ml-tooltip.soon .st {
    color: var(--yellow);
}
.statuses .active.busy .desc, .ml-tooltip.busy .st {
    color: var(--red);
}
.statuses .active.away .desc, .ml-tooltip.away .st {
    color: var(--away-grey);
}

.status-age {
    text-align: center;
}

.lobbies, .games {
    margin: 1rem;
    clear: both;
}

.lobby .body p, .games h4 {
    margin-top: 0;
    margin-bottom: 0;
}

.games .heading, .lobbies .heading {
    display: inline-block;
}

.games > div, .lobbies > div {
    background-color: var(--bg-tone-2);
}

h2 {
    margin: 0;
}

h3 {
    display: inline;
}

.close-icon {
    margin-top: 0.1rem;
    margin-left: 1.5rem;
}

.lobby .mid {
    position: relative;
}
.lobby .edit-icon {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.heading {
    padding: 1rem;
}

.lobbies > .body, .games > .body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.lobby, .game {
    background-color: var(--bg-tone-1);
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    border: 1px solid;
    border-color: rgba(255,255,255,0.5);
}
.archived.game {
    color: var(--text-dim);
    border-color: #2b92be;
}

.lobby .head {
    background-color: var(--bg-tone-3);
    padding: 1rem;
}

.lobby .mid {
    background-color: var(--bg-tone-2);
    padding: 1rem;
}

.lobby .body {
    background-color: var(--bg-tone-1);
    padding: 1rem;
}

.lobby .players {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 25rem;
    margin-bottom: 1rem;
    justify-content: space-between;
}

.lobby .player {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.player .avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: solid 3px;
}

.player .name {
    border: solid 0px;
    border-bottom-width: 5px;
}

.games .heading {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.games .heading span, .games .heading a {
    margin-bottom: 0.25rem;
    margin-left: 2rem;
}

.game {
    max-width: 25rem;
    min-width: 15rem;
    border-color: #3cc;
}

.game .head {
    background-color: var(--bg-tone-3);
    padding: 1rem;
}

.game .mid {
    background-color: var(--bg-tone-2);
    padding: 1rem;
}

.game .body {
    background-color: var(--bg-tone-1);
    padding: 1rem;
    flex-grow: 1;
}

.game .players {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.game .player {
    margin: 0.5rem;
}

.dim {
    color: var(--text-dim);
}

.point {
    cursor: pointer;
}

button {
    width: 100%;
    background-color: var(--action-tone-1);
    color: #eee;
    margin-top: 0.5rem;
    border-style: solid;
    border-width: 1px;
    border-color: #3cc;
    padding: 0.5rem;
    margin-bottom: 0;
}
.archived button {
    background-color: var(--alt-tone-1);
    border-color: rgba(255,255,255,0.5);
    /* filter: darken(50%); qq */
}
button:hover {
    background-color: var(--bg-tone-3);
    cursor: pointer;
    text-decoration: underline;
}

.ml-tooltip {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--bg-tone-1);
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 4px solid;
}
.ml-tooltip .avatar {
    width: 7rem;
    height: 7rem;
}
.ml-tooltip .contents {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem;
}
.ml-tooltip .notes {
    flex-grow: 1;
}
.ml-tooltip h3 {
    margin-top: 0;
    margin-bottom: 0;
}
.ml-tooltip p {
    margin: 0;
}


/* Devcards */

.using-devcards .com-rigsomelight-devcards-card-base-no-pad {
    background-color: #111;
    border-color: #222;
}

.using-devcards .com-rigsomelight-devcards-card-base {
    background-color: #222;
}

.using-devcards .com-rigsomelight-devcards-panel-heading {
    background-color: #222;
}