.container-fluid {
    max-width: 1400px;
}
a, .navbar a:hover, a.nav-link:hover {
    text-decoration: none;
}
a:hover {  
    text-decoration: underline;
}
.bg-mountain {
    background: #111 url('/media/backgrounds/night.jpg') no-repeat;
    background-position: center center;
}
.bg-main {
    background: #111 url('/media/backgrounds/navy.jpg') repeat;
}
.bg-main-en {
    background-color: #111;
}
.bg-peach-blossom {
    background: #111 url('/media/backgrounds/hoadao.png') no-repeat;
    background-position: left bottom;
}
.bg-orange {
    background-color: #f5d020;
    background-image: linear-gradient(315deg, #f5d020 0%, #f53803 74%);
}
.bg-blue {
    background-color: #e9f3ff;
}
.bg-grey {
    background-color: #f0f2f5;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}
.navbar-brand {
    font-size: 2rem;
    font-family: 'Peddana', serif;
    padding-top: .4rem;
    padding-bottom: .25rem;
    line-height: 1.2rem;
}
.card {
    box-shadow: 0 0.2rem 0.4rem rgba(100,100,100,.2);
}
.card-body {
    padding: .6rem;
}

.navbar {
    padding: .1rem .25rem;
}
#nav-tab a {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.fieldset {
    border: solid 1px #fff;
    padding: 5px;    
}
legend {
    width: auto;
    margin-bottom: 0;
    font-size: .8rem;
    float: none;
}
label {
    margin-bottom: 0;
}
.badge {
    font-size: 80%;
    font-weight: 400;
    line-height: 1.5;
}
#notice {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 80%;
    padding: .2rem .75rem;    
}
.sup {    
    top: -.5rem;
    margin-left: 2px;
}
.sup img {
    height: 20px;
    width: 20px;
}
.img-sm {
    height: 24px;
    width: 24px;
}
.img-sx {
    height: 16px;
    width: 16px; 
}
.mono {
    font-family: 'Ubuntu Mono', monospace;
}
.cursor {
    cursor: pointer;
}
[data-profile]:hover {
    color: blue;
    cursor: pointer;
}

.border-double {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
.w-30 {
    width: 30%;
}
.w-33 {
    width: 33%;
}
.ads-side {
    min-width: 300px;
}
.img-300 {
    width: 300px;
    height: 300px;
}
/* Board */

.player {
    min-height: 150px;
    min-width: 150px;    
    font-size: .9rem;
    color: #fff !important;
}
.player-sm {
    font-size: .9rem;
    color: #fff !important;
    min-height: 3rem;
}
sup.current {
    font-size: .4rem;
    color: #007bff;
    top: -.5rem;
}
.avatar {
    width: 80px;
    height: 80px;
}
.avatar-sm, .table-sm img {
    width: 16px;
    height: 16px;
}
#timer.badge {
    line-height: 1;
}
#viewers {
    padding-top: .5rem;
    margin-bottom: 0;
    font-size: .9rem;
}
.board-border-caro {
    border-style: solid;
    border-width: 6px;
    border-image: linear-gradient(to bottom, lightgray, yellowgreen) 1;
}
.board-border-gomoku {
    border-style: solid;
    border-width: 6px;
    border-image: linear-gradient(to bottom, lightgray, darkorange) 1;
}
#table {
    box-sizing: border-box;
    background-color: #fff;
    padding: 0;
    margin: 0;
    table-layout: fixed;
}

#table td {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    border: solid 1px #dfdfdf;
    line-height: normal;
    padding: 0;
    margin: 0;
    position: relative;
}
#table td img {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
}
#table td::after {
    content: attr(data-coord);
    color: #555;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#table.hide-coords td::after {
    display: none;
}
td[disabled] {
    background-color: #ececec;
}
#table td.hidden {    
    border: 0;
    background-color: #f0f2f5;
}

#gameViewer td {
    width: 30px;
    height: 30px;
}
td.checked {
    background-color: #ffff00;
}

img.symbol {
    width: 24px;
    height: 24px;
}
/* Chat */
.narrow {
    padding-left: .1rem;
    padding-right: .1rem;
}
.nav-link {
    padding: .25rem .5rem;
}
#chat .nav-link {
    padding: .25rem;
    padding-left: .4rem;
    font-size: .8rem;
}
.nav-tabs {
    /*border: 0;*/
}
.nav-tabs .active {
    margin-bottom: -1px;
}
#chat .close {
    margin-left: .25rem;
    font-size: 1rem;
}

#chat .content {
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(0,0,0,.125);    
    color: #000000;
    background-color: #FFF;
    vertical-align: top;
    font-size: 0.9rem;
    padding: .25rem;
    height: 100%;
}

#chat img {
    vertical-align: bottom;
}
#chat strong {
    color: #007bff !important;
}
#chat span.sys_msg {
    background-color: #CCC;
    color: #00F;
    margin: 2px 2px 2px 0px;
    width: 100%;
    display: block;
    border-radius: 3px;
}
.enable-chat {
    cursor: pointer;    
}
.enable-chat:hover {
    color: #007bff;
}
#sound {
    cursor: pointer;
}
#msg {
    color:#000;
    height: 30px !important;
    border: 1px solid rgba(0,0,0,.25);
}
#send {
    height: 30px !important;
}
#emoticonWindow {
    width: 230px;
    height: 120px;
    padding: 4px;
    border: solid 1px #DDD;
    background-color: #FFF;
    overflow: auto;
    display: none;
    position: absolute;
    z-index: 3000;
}
#emoticonWindow img {
    cursor: pointer;
}
#emoticon {
    cursor: pointer;
}

/* List of boards */

#boards.desktop {
    overflow-y: auto;
    width: 100px;
    height: calc(100vh - 9rem);
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}

.boards li {
    margin-bottom: 0.25rem;
}
.boards-mobile li {
    margin-bottom: .5rem;
}
.boards .btn {
    padding: .2rem .5rem;
}

/* Players */
#players.desktop {
    overflow-y: auto;
    width: 100%;
    /*max-height: calc(100vh - 8rem);*/
    padding-left: 0.1rem;
    padding-right: 0.1rem;    
}
.dot-offline {
    color: #6c757d;
    font-size: 0.5rem;
}
.dot-online {
    color: #42b72a;
    font-size: 0.5rem;
}
.last-online {
    font-size: 0.7rem;
}
.text-offline {
    color: #bbb;
}

/* Game Viewer */
.controls span, #steps td {
    cursor: pointer;
}
.controls img {
    width: 24px;
    height: 24px;
}
.controls button {
    padding: 0;
    margin: 0;
}

/* Nav */
.top-nav {
    font-size: 100%;
    margin-bottom: 1rem;
}
.top-nav a {
    color: #606770;
}
.top-nav .divider {
    margin-left: .2rem;
    margin-right: .2rem;
    color: #888;
}
/* VIP Colors*/
.vip-color-1, .vip-color-1 a {
    color: #FFF;
    text-shadow: 
        0 0 2px #fff, 
        0 0 4px #fff, 
        0 0 6px #fff, 
        0 0 8px #ff00de, 
        0 0 14px #ff00de, 
        0 0 16px #ff00de, 
        0 0 20px #ff00de, 
        0 0 30px #ff00de;
}

.vip-color-2, .vip-color-2 a {
    color: #FFF;
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 8px #00ff00,
        0 0 14px #00ff00,
        0 0 16px #00ff00,
        0 0 20px #00ff00,
        0 0 30px #00ff00;
}
.class-c-color {
    font-weight: 600;
    color: #ccffcc;
}
.black-color {
    font-weight: 500;
    color: #666;
}
.vip-color-3, .vip-color-3 a {
    color: #FFF;
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 8px #011efe,
        0 0 14px #011efe,
        0 0 16px #011efe,
        0 0 20px #011efe,
        0 0 30px #011efe;
}

.vip-color-4, .vip-color-4 a {
    color: #FFF;
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 8px #ff0000,
        0 0 14px #ff0000,
        0 0 16px #ff0000,
        0 0 20px #ff0000,
        0 0 30px #ff0000;
}

.vip-color-5, .vip-color-5 a {
    color: #FFF;
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 8px #ffff00,
        0 0 14px #ffff00,
        0 0 16px #ffff00,
        0 0 20px #ffff00,
        0 0 30px #ffff00;
}

/* Modal */
.modal-header {
    border-bottom: 0;
}
/* Toast */
.toast-header {
    background-color: #eee;
}
.toast {
    background-color: #fff;    
}
.toast-red {
    box-shadow: 0 0 50px #ff0000;
}
.toast-blue {
    box-shadow: 0 0 50px #007bff;
}
.toast-grey {
    box-shadow: 0 0 50px #888;
}

/* Div Scroll */
.scroll::-webkit-scrollbar {
    width: .8rem;
}
.scroll::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    -webkit-box-shadow: inset 0 0 .3rem rgba(0,0,0,0.3); 
    box-shadow: inset 0 0 .3rem rgba(0, 0, 0, 0.3);
    -webkit-border-radius: .5rem;
    border-radius: .5rem;
}

.scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: .5rem;
    border-radius: .5rem;
    background: rgba(118,123,128,0.5); 
    -webkit-box-shadow: inset 0 0 .3rem rgba(0,0,0,0.5); 
}