/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%;
    }

    .row-cols-xxl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xxl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xxl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xxl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xxl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xxl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xxl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-xxl-0 {
        margin-left: 0;
    }

    .offset-xxl-1 {
        margin-left: 8.33333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.66666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.33333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.66666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.33333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.66666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.33333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.66666667%;
    }

    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x: 0;
    }

    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y: 0;
    }

    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x: 1rem;
    }

    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y: 1rem;
    }

    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x: 3rem;
    }

    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y: 3rem;
    }
}

html body {
    height: auto;
}

html body .content {
    min-height: auto;
}

.btn-gao {
    border-color: #1976d2 !important;
    background-color: #247dd6 !important;
    color: #ffffff;
}
.btn-gao:hover {
    border-color: #398fe6 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px -8px #398fe6;
}

body {
    font-family: "Roboto", Helvetica, Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-self;
}
.header-navbar {
    font-family: "Roboto", Helvetica, Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-self;
}
.breadcrumb {
    font-family: "Roboto", Helvetica, Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-self;
}
:root {
    --font-family-sans-serif: "Roboto", Helvetica, Arial,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-self;
    --font-family-monospace: "Roboto", Helvetica, Arial,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-self;
}
.navigation {
    font-family: "Roboto", Helvetica, Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-self;
}
.navigation .navigation-header {
    font-family: "Roboto", Helvetica, Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-self;
}

.main-menu.menu-light .navigation > li.active > a {
    background: rgba(0, 0, 0, 0)
        linear-gradient(118deg, rgb(40, 199, 111), rgba(40, 199, 111, 0.7))
        repeat scroll 0% 0%;
    box-shadow: rgba(40, 199, 111, 0.7) 0px 0px 10px 1px;
}
.main-menu.menu-light .navigation > li ul .active {
    background: rgba(0, 0, 0, 0)
        linear-gradient(118deg, rgb(40, 199, 111), rgba(40, 199, 111, 0.7))
        repeat scroll 0% 0%;
    box-shadow: rgba(40, 199, 111, 0.7) 0px 0px 10px 1px;
}

.main-menu .navbar-header .navbar-brand .brand-text {
    color: rgb(40, 199, 111);
}

.main-menu .navbar-header .navbar-brand {
    margin-top: 0.75rem;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #cccccc;
}

table.table-bordered.dataTable {
    border: 1px solid #cccccc;
}
table.table-bordered.dataTable thead th,
table.table-bordered.dataTable thead td,
table.table-bordered.dataTable tfoot th,
table.table-bordered.dataTable tfoot td {
    border-right: 1px solid #cccccc;
}
table.table-bordered.dataTable thead th,
table.table-bordered.dataTable thead td {
    border-bottom: 1px solid #cccccc;
}
table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
    border-bottom: 1px solid #cccccc;
}
table.table-bordered.dataTable tfoot th,
table.table-bordered.dataTable tfoot td {
    border-top: 1px solid #cccccc;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
    left: inherit;
    right: 0;
    padding-right: 0.5rem;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    left: inherit;
    right: 0;
    padding-right: 0.5rem;
}

.card .card-header .heading-elements,
.card .card-header .heading-elements-toggle {
    background-color: inherit;
    position: inherit;
    top: inherit;
    right: inherit;
    cursor: pointer;
}

.table-bordered thead th,
.table-bordered thead td {
    border: 1px solid #cccccc;
    border-bottom-width: 2px;
}

html .pace .pace-progress {
    background: rgb(40, 199, 111);
}
.pace .pace-progress {
    height: 20px;
}

.navbar-brand {
    color: #fff;
}
.bgheader {
    background-color: #1976d2 !important;
    color: #fff;
}

ul.navbar-nav li:nth-child(1),
ul.navbar-nav li:nth-child(2) {
    margin-top: auto;
    margin-bottom: auto;
    font-size: 1.3rem;
}

ul.navbar-nav li:nth-child(n + 3) a {
    padding: 0.8rem;
}

.block-info {
    background: #72acfc;
    color: #fff;
    font-size: 1.4rem;
    margin-top: 1rem;
}

.timer span {
    padding: 5px;
    border: 1px solid #fff;
    background: #fff;
    border-radius: 5px;
    color: #1e1e1e;
}

.timer span:nth-child(n + 1) {
    margin-left: 10px;
}

.number span {
    padding: 7px 13px;
    border: 2px solid #fff;
    background: transparent;
    border-radius: 50%;
    color: #000;
}

.number span:nth-child(n + 1) {
    margin-left: 10px;
}

.nav.nav-tabs .nav-item .nav-link {
    font-size: 1.35rem;
}

.number-2 span {
    padding: 7px 13px;
    border: 2px solid rgb(76, 175, 80);
    background: rgb(76, 175, 80);
    border-radius: 50%;
    color: #fff;
}

.number-2 span:nth-child(n + 1) {
    margin-left: 10px;
}

.nav.nav-tabs .nav-item .nav-link.active:after {
    width: 0%;
}

.table th {
    font-size: 1.2rem;
}

.block-room .nav.nav-tabs {
    border-bottom: 2px solid #dae1e7;
    padding-bottom: 1rem;
}

.block-room .nav.nav-tabs .nav-item .nav-link span {
    border-color: #4839eb !important;
    background-color: #7367f0 !important;
    color: #ffffff;
    padding: 0.5rem 0.8rem;
    border-radius: 5px;
}

.block-room .nav.nav-tabs .nav-item .nav-link.active span {
    border-color: #e42728 !important;
    background-color: #ea5455 !important;
    color: #ffffff;
    padding: 0.5rem 0.8rem;
    border-radius: 5px;
}

.prize ul {
    background: #1976d2;
}

.prize .nav.nav-tabs {
    margin-bottom: 0px;
}

.prize .nav.nav-tabs .nav-item .nav-link {
    color: #ccc;
}

.prize .nav.nav-tabs .nav-item .nav-link.active {
    color: #fff;
}

.card .card {
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1) !important;
}

.list_gao .card {
    margin-bottom: 1rem;
}

.swal2-content {
    font-weight: bold !important;
}

.card-body {
    padding: 1rem 2.2rem 0rem 2.2rem;
}

.card-body .card-body {
    padding: 2.2rem 2.2rem 2.2rem 2.2rem;
}

.block-info .card-body {
    padding: 2.2rem 2.2rem 2.2rem 2.2rem;
}

.btn-contact {
    margin-left: 0.35rem;
}

.navbar-dark .navbar-toggler {
    border: none;
}
.navbar-dark .navbar-toggler-icon {
    background-image: none;
}

.create-project-id-modal .btn-value {
    width: 100%;
}

.profile .card-body {
    padding: 2.2rem 1.2rem !important;
    font-size: 1.2rem !important;
}

.profile .btn {
    padding: 0.9rem 2rem !important;
}

.bank-img {
    height: 30px;
    vertical-align: middle;
}

/*
 * Sidebar
 */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 48px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 767.98px) {
    /* .sidebar {
        top: 5rem;
    } */
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #999;
}

.sidebar .nav-item.active {
    border-right: 3px solid #1976d2;
}

.sidebar .nav-link.active {
    color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
    color: inherit;
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
}

#sidebarMenu .nav-link {
    padding: 0.8rem 0.5rem;
}

.sidebar-sticky {
    background: #ffffff;
    border-right: 1px solid #ccc;
}

.form-control-plaintext {
    color: #000;
    outline: none;
}

.text-muted {
    color: #5e6c79 !important;
}

.list-note {
    margin-left: -1.2rem;
}

.block-search .card-body {
    padding: 0rem 2.2rem !important;
}

.block-search .card-header {
    padding-bottom: 0rem !important;
}

.block-search label {
    font-size: 1.2rem;
}

.block-search .btn {
    padding: 0.9rem 2rem !important;
}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    font-size: 1rem;
}

.t1-datatable {
    width: 100% !important;
}

@media (max-width: 1500px) {
    .btn {
        font-size: 1rem;
    }
}
@media (max-width: 1024px) {
    #sidebarMenu .nav-link {
        padding: 0.8rem 0.5rem;
        font-size: 0.685rem;
    }

     .t1-datatable {
        width: 1140px !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    ul.navbar-nav li:nth-child(1),
    ul.navbar-nav li:nth-child(2) {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-size: 1rem;
    }

    .btn-export,
    .btn-import {
        width: 100%;
    }
    .btn-contact {
        margin-left: 0rem;
    }
    .btn {
        font-size: 1rem;
    }

    .card-body {
        padding: 1rem 0.3rem 0rem 0.3rem;
    }

    .card-body .card-body {
        padding: 1rem 0.3rem 0rem 0.3rem;
        padding-bottom: 1rem;
    }

    .block-info .card-body {
        padding: 1rem 0.3rem 0rem 0.3rem;
    }

    .nav.nav-tabs .nav-item .nav-link {
        font-size: 1.2rem;
    }

    .table th {
        font-size: 1rem;
    }

    .block-info {
        font-size: 1rem;
        margin-top: 0.5rem;
        padding-top: 0.2rem;
        padding-bottom: 1.2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    ul.navbar-nav li {
        font-size: 1rem;
    }

    #navbarSupportedContent .btn {
        font-size: 0.675rem;
    }

    .form-m-header {
        padding: 0rem;
        margin: 0rem !important;
    }

    .list_gao p {
        font-size: 1rem;
    }

    #sidebarMenu .nav-link {
        padding: 0.8rem 0.5rem;
        font-size: 0.875rem;
    }

    .block-search .card-header {
        padding-bottom: 1rem !important;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 0.875rem;
    }

    #sidebarMenu .nav-item {
        margin-left: 0.5rem;
    }

    #sidebarMenu .btn-sidebar {
        padding: 0px;
    }

    ul.navbar-nav li:nth-child(1),
    ul.navbar-nav li:nth-child(2) {
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 1rem;
    }

    .btn-export,
    .btn-import {
        width: 100%;
    }
    .btn-contact {
        margin-left: 0rem;
        margin-top: 1rem;
        width: 100%;
    }
    .btn {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    #btn-confirm {
        padding: 0.9rem 2rem;
    }
    .card-body {
        padding: 1rem 0.3rem 0rem 0.3rem;
    }

    .card-body .card-body {
        padding-bottom: 1rem;
    }

    .nav.nav-tabs .nav-item .nav-link {
        font-size: 0.875rem;
    }

    .table th {
        font-size: 0.875rem;
    }

    .block-info {
        font-size: 1rem;
        margin-top: 0.5rem;
        padding-top: 0.2rem;
        padding-bottom: 1.2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    ul.navbar-nav li {
        font-size: 1rem;
    }

    #navbarSupportedContent .btn {
        font-size: 1rem;
    }

    .form-m-header {
        padding: 0rem;
        margin: 0rem !important;
        border-top: 2px solid #fff;
    }

    .number {
        text-align: center !important;
    }

    .table-history-bet th,
    .table-history-bet td {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .table-history-bet .number-2 span:nth-child(n + 1) {
        margin-left: 3px;
    }

    .profile .card-body {
        font-size: 1rem !important;
    }

    .profile {
        margin-top: 0rem !important;
    }

    .sidebar {
        width: 80%;
    }

    #sidebarMenu .nav-link {
        padding: 0.8rem 0.5rem;
        font-size: 1rem;
    }

    /* .sidebar-sticky {
        margin-top: -1rem !important;
    } */
}

@media (max-width: 435px) {
    ul.navbar-nav li:nth-child(1),
    ul.navbar-nav li:nth-child(2) {
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 1.2rem;
    }

    ul.navbar-nav li {
        font-size: 1rem;
    }

    ul.navbar-nav li a {
        min-width: 150px;
        font-size: 1.2rem;
    }

    .card-body .card-body {
        padding: 1rem 0.5rem 0.5rem 0.5rem;
        padding-bottom: 1rem;
    }
    body {
        font-size: 0.875rem;
    }
    .btn-contact {
        margin-top: 1rem;
        width: 100%;
    }
    .btn {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 400px) {
    .card-body .card-body {
        padding: 1rem 0.2rem 0.5rem 0.2rem;
        padding-bottom: 1rem;
    }
    body {
        font-size: 0.775rem;
    }
    .btn-contact {
        margin-top: 1rem;
        width: 100%;
    }
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

    .profile .card-body {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 376px) {
    body {
        font-size: 0.725rem;
    }
    .btn-contact {
        margin-top: 1rem;
        width: 100%;
    }

    .nav.nav-tabs .nav-item .nav-link {
        font-size: 0.775rem;
    }
}

@media (max-width: 360px) {
    .nav.nav-tabs .nav-item .nav-link {
        font-size: 0.775rem;
    }
}

@media (max-width: 344px) {
    body {
        font-size: 0.825rem;
    }
    .btn-contact {
        margin-top: 1rem;
        width: 100%;
    }

    .btn {
        padding: 0.5rem 1rem;
    }
}