body {
    font-family: 'Varela Round', sans-serif;
}

.login {
    border: 1px solid #b51818;
}

.login>.login-header {
    background-image: linear-gradient(to bottom, #b51818 0, red 100%);
    color: white;
}

#navbarResponsive>ul>li>a.nav-link {
    padding-right: 2rem;
    padding-left: 2rem;
}

#header {
    box-shadow: 0px 1px 15px 0px #000;
}

#header .navbar-brand > .title-1 {
    padding: 0 3px;
    border: 1px solid #2196F3;
    background: #2196F3;
    color: #fff;
}

#header .navbar-brand > .title-2 {
    padding: 0 3px;
    border: 1px solid #f00;
    background: #f00;
    color: #fff;
    margin-left: -6px;
}

#header .navbar-brand > .title-3 {
    font-size: x-small;
    margin-left: -3px;
}

#right>div>div>ul>li.nav-item:hover,
#right>div>div>ul>li.nav-item.active {
    border-bottom: 1px solid #b51819;
    font-weight: 500;
}

#myTabContent>div>ul>li {
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    transition: 1s all ease;
    color: #007bff;
}

#games>div>a>div>img {
    border-radius: 20px;
}

.modal_loading {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, .7);
    z-index: 99999999;
}

.modal_loading > #loading {
    position: absolute;
    top: 50%;
    left: 50%;
}

.dark-theme {
    background: #222;
}

.dark-theme>#header, .dark-theme .card, .dark-theme .card, .dark-theme .modal .modal-dialog .modal-content, .dark-theme #list_game {
    background: #343a40 !important;
}

.dark-theme>#header, .dark-theme .card, .dark-theme .card, .dark-theme .modal .modal-dialog .modal-content, .dark-theme .navbar-brand, .dark-theme .card .card-body, .dark-theme #left .login>.login-header {
    color: #fff !important;
}

.dark-theme .navbar-toggler {
    color: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.1);
}

.dark-theme .card {
    border: 1px solid #000 !important;
}

.dark-theme #right>div>div>ul>li.nav-item:hover, .dark-theme  #right>div>div>ul>li.nav-item.active {
    border-bottom: 1px solid #ffffff;
    font-weight: 500;
}

.dark-theme #left .login>.login-header {
    background-image: linear-gradient(to bottom, #404040 0, black 100%);
    color: white;
}

.dark-theme .table {
    color: #fff;
    background-color: #212529;
}

.dark-theme .table th {
    color: #fff;
    background-color: #212529;
    border-color: #32383e;
}

.dark-theme td, .dark-theme th, .dark-theme thead th {
    border-color: #32383e;
}

.dark-theme .table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,.05);
}

.dark-theme .list-group>.list-group-item {
    color: #1b1e21;
    background-color: #c6c8ca;
}
.dark-theme .list-group>.list-group-item.active {
    color: #fff;
    background-color: #1b1e21;
    border-color: #1b1e21;
}
@media (min-width: 992px) {
    .dark-theme #navbarResponsive>ul>li>a.nav-link:hover, #navbarResponsive>ul>li>a.nav-link.active {
        background: #707a82;
    }
    .dark-theme #navbarResponsive>ul>li>a.nav-link {
        color: rgba(255,255,255,.5);
    }
    .login {
        height: auto;
        max-height: inherit;
        min-height: 300px;
    }
}

@media (max-width: 992px) {
    .dark-theme #navbarResponsive>ul>li>a.nav-link:hover {
        background: #707a82;
    }
    .dark-theme #navbarResponsive>ul>li>a.nav-link {
        color: rgba(255,255,255,.5);
    }
}

.comment .info-comment {
    padding: 10px;
}

.comment .info-comment .outsite-comment .avartar-comment {
    width: 46px;
    float: left;
    margin-right: 10px;
}

.comment .info-comment .outsite-comment .avartar-comment>img {
    border: 1px solid #eee;
    background-color: #fff;
    height: 46px;
    width: 46px;
}

.comment .info-comment .outsite-comment .item-comment {
    margin-left: 55px;
}

.comment .info-comment .outsite-comment .item-comment .outline-content-comment {
    background: #f7f7f7;
    padding: 10px;
    border-radius: 10px;
}

.comment .info-comment .outsite-comment .item-comment .outline-content-comment .content-comment {
    padding: 10px 0;
    color: #000;
}

#games .card {
    overflow: hidden;
}

/* Label New */
#games .card .card-body.new:before {
    content: "MỚI";
    transform: rotate(-45deg);
    position: absolute;
    width: 100%;
    text-align: center;
    background: #28a745;
    padding: 25px 0px 5px 0;
    top: -10px;
    left: -60px;
}

/* Label Hot */
#games .card .card-body.hot:before {
    content: "HOT";
    transform: rotate(-45deg);
    position: absolute;
    width: 100%;
    text-align: center;
    background: #dc3545;
    padding: 25px 0px 5px 0;
    top: -10px;
    left: -60px;
}


/* Label Coming */
#games .card .card-body.coming:before {
    content: "SẮP";
    transform: rotate(-45deg);
    position: absolute;
    width: 100%;
    text-align: center;
    background: #17a2b8;
    padding: 25px 0px 5px 0;
    top: -10px;
    left: -60px;
}

/* Maintenance Label */ 
#games .card .card-body.maintenance:before {
    content: "B.TRÌ";
    transform: rotate(-45deg);
    position: absolute;
    width: 100%;
    text-align: center;
    background: #ffc107;
    padding: 25px 0px 5px 0;
    top: -10px;
    left: -60px;
}

/* Pagination */
.pagination{
	display: table;
    margin: 0 auto;
}

.pagination li{
	display: table-cell;
}

.page-link {
    position: relative;
    display: block;
    padding: 2px 0 1px 2px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    font-size: 10px;
    border-radius: 50% !important;
    margin: 0 2px;
    width: 17px;
    text-align: center;
}

@media (max-width: 1199px) and (min-width: 992px) {
    #games .card .card-body.new:before,
    #games .card .card-body.hot:before,
    #games .card .card-body.coming:before,
    #games .card .card-body.maintenance:before {
        left: -50px;
    }
}

@media (max-width: 991px) and (min-width: 576px) {
    #games .card .card-body.new:before,
    #games .card .card-body.hot:before,
    #games .card .card-body.coming:before,
    #games .card .card-body.maintenance:before {
        top: -12px;
        left: -62px;
    }
}

@media (max-width: 575px) and (min-width: 550px) {
    #games .card .card-body.new:before,
    #games .card .card-body.hot:before,
    #games .card .card-body.coming:before,
    #games .card .card-body.maintenance:before {
        padding: 60px 0px 5px 0;
        top: -35px;
        left: -105px;
        font-size: 30px;
    }
}

@media (max-width: 549px) and (min-width: 530px) {
    #games .card .card-body.new:before,
    #games .card .card-body.hot:before,
    #games .card .card-body.coming:before,
    #games .card .card-body.maintenance:before {
        padding: 60px 0px 5px 0;
        top: -35px;
        left: -105px;
        font-size: 25px;
    }
}

@media (max-width: 529px) and (min-width: 510px) {
    #games .card .card-body.new:before,
    #games .card .card-body.hot:before,
    #games .card .card-body.coming:before,
    #games .card .card-body.maintenance:before {
        padding: 60px 0px 5px 0;
        top: -35px;
        left: -100px;
        font-size: 20px;
    }
}

@media (max-width: 509px) {
    #games .card .card-body.new:before,
    #games .card .card-body.hot:before,
    #games .card .card-body.coming:before,
    #games .card .card-body.maintenance:before {
        display: none;
    }
}