@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/font-awesome/css/font-awesome.min.css');
@import url('../dist/tiny-slider/css/tiny-slider.css');
:root { --primary-font: 'Poppins', sans-serif, Arial, Helvetica; --secondary-font: 'K2D', sans-serif; --dark-gray: #161717; --dark-gray-1: #343434; --dark-blue: #18181B; --orange: #FE8529; --orange-1: #E57124; --light-orange: #FEA04A; --light-orange-1: #FA7B27; --pink: #FD6B6E; --light-pink: #FE9394; --navy-blue: #0A293C; --violet: #4A1F82; --light-violet: #AF7BE8; }
body { background-color: var(--dark-gray); color: var(--bs-white); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; position: relative; }
a { color: var(--bs-blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--bs-white); font-family: var(--primary-font); font-weight: 600; text-transform: uppercase; }
h1 { font-size: 24px; font-weight: 800; margin-bottom: 1rem; text-transform: uppercase; }
h1 span { color: var(--orange); }
p, li { color: var(--bs-white); font: 400 14px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

.wrapper { background: linear-gradient(30deg, rgba(22,23,23,1) 30%, rgba(74,31,130,1) 100%); clear: both; height: 100%; overflow: hidden; width: 100%; }

#sidebar { background-color: var(--bs-black); color: #fff; overflow: hidden; overflow-y: auto !important; scrollbar-width: none; left: 0; position: absolute; top: 0; transition: all 0.3s; width: 250px; z-index: 999; }
#sidebar::-webkit-scrollbar { display: none; }
#sidebar #mCSB_1 { max-height: inherit !important; }
#sidebar.active { margin-left: -250px; }
#sidebar .sidebar-header { padding: 15px 15px }
#sidebar .sidebar-header img { max-width: 180px; }
#sidebar .title { background-color: rgba(255, 255, 255, 10%); color: var(--orange); font: 600 14px var(--secondary-font); margin: 0px; padding: .7rem 1rem; text-transform: uppercase; }
#sidebar .title img { margin-right: 1rem; max-width: 45px; }
#sidebar ul { list-style: none; margin: .5rem 1rem 2rem; padding: 0px; }
#sidebar ul li { color: var(--bs-white); font: 400 14px var(--secondary-font); padding: 5px 0px; text-transform: capitalize; }
#sidebar ul li picture { border: 1px solid rgba(255, 255, 255, 50%); border-radius: 3px; display: inline-block; height: 35px; margin-right: 1rem; width: 35px; }
#sidebar ul li picture img { border-radius: 3px; }
#sidebar ul li a { color: var(--bs-white); display: block; }
#sidebar ul li a:hover { color: var(--light-violet); }
#sidebar ul.media { margin: 0px; }
#sidebar ul.media li { height: auto; padding: 0px; }
#sidebar ul.media li a { border-bottom: 1px solid rgba(255, 255, 255, 30%); display: block; padding: .5rem 1rem; }
#sidebar .btn-close { filter: brightness(0) invert(1); opacity: 1; position: absolute; top: 10px; right: 10px; }

.sidebarCollapse { display: none; }

#content { padding: 30px 50px 0px; position: relative; margin-left: 250px; right: 0; top: 0; transition: all 0.3s; width: calc(100% - 250px); }
#content.active { width: 100%; }
#content .container-fluid { padding: 0px; }

.navbar { display: none; }

marquee { background: rgb(250,123,39); background: linear-gradient(90deg, rgba(250,123,39,0.3) 0%, rgba(253,55,59,0.3) 100%); border: 1px solid rgba(254, 133, 41, 30%); color: var(--orange); border-radius: 10px; font-size: 14px; font-weight: 800; margin-bottom: 1rem; padding: 10px 15px; text-transform: uppercase; }

.hilite { background-color: var(--dark-gray-1); border: 2px solid var(--orange); border-radius: 10px; margin-bottom: 1.2rem; padding: 15px; width: 100%; }
.hilite h2 {  color: var(--light-orange); font: 700 34px var(--secondary-font); margin: 0px; }
.hilite p { font-size: 16px; font-weight: 800; margin-bottom: 0px; }

.carousel { margin-bottom: 3rem; }
.carousel h1 { font: 700 54px var(--primary-font); text-shadow: 0px 3px 6px var(--bs-black); }
.carousel .carousel-caption { bottom: 3.25rem; }
.carousel-indicators { margin-bottom: -2rem; }
.carousel-indicators [data-bs-target] { height: 7px; opacity: 1; width: 48px; }
.carousel-indicators .active { background-color: var(--orange); width: 98px; }

.btn-pink { background-color: var(--light-pink); border: 2px solid var(--pink); border-radius: 10px; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 50%), 2px 4px 8px rgb(0, 0, 0); color: var(--bs-white); font: 700 14px var(--primary-font); margin-right: 10px; text-transform: uppercase; width: 145px; }
.btn-pink:hover, .carousel .btn-pink:focus { background-color: var(--light-pink) !important; border: 2px solid var(--pink) !important; border-radius: 10px; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 50%), 2px 4px 8px rgb(0, 0, 0) !important; }
.btn-orange { background-color: var(--light-orange-1); border: 2px solid var(--orange-1); border-radius: 10px; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 50%), 2px 4px 8px rgb(0, 0, 0); color: var(--bs-white); font: 700 14px var(--primary-font); text-transform: uppercase; width: 145px; }
.btn-orange:hover, .btn-orange:focus { background-color: var(--light-orange-1) !important; border: 2px solid var(--orange-1) !important; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 50%), 2px 4px 8px rgb(0, 0, 0) !important; }

.pixiu { margin-bottom:1.5rem; }
.pixiu .tns-item  img { border: 1px solid var(--orange); border-radius: 10px; }

.subhead { border: 1px solid var(--bs-white); border-radius: 6px; color: var(--bs-white); font: 500 14px var(--secondary-font); display: inline-block; padding: 5px 20px; text-transform: uppercase; }

.table thead tr th { background-color: rgba(74, 31, 130, 25%); font: 800 16px var(--primary-font); font-weight: 800; }
.table thead tr th, .table tbody tr td { border: inherit; color: var(--bs-white); padding: 10px 10px; }
.table tbody tr:nth-child(even) td { background-color: rgba(74, 31, 130, 25%); }
.table tbody tr td { font: 500 15px var(--secondary-font); text-align: center; vertical-align: middle; }
.table tbody tr td img { margin-right: 5px; max-width: 47px; }

footer { background-color: var(--dark-gray); border-top: 5px solid yellow; clear: both; margin-top: 1.2rem; padding: 4% 0px; width: 100%; }
footer picture { display: inline-block; margin-left: 5%; }

.btn-wallet { background-color: var(--pink); border-color: var(--pink); border-radius: 10px 10px 0px 0px; box-shadow: 0px 3px 6px rgb(0, 0, 0); color: var(--bs-white); font: 800 15px var(--primary-font); right: 0; line-height: 30px; margin: 15% -88px 0px -85px; position: fixed; top: 0; transform: rotate(-90deg); text-transform: uppercase; width: 220px; z-index: 1; }
.btn-wallet:hover, .btn-wallet:focus { background-color: var(--pink) !important; border-color: var(--pink) !important; }

.modal-content { background: rgb(2,2,2); background: linear-gradient(30deg, rgba(2,2,2,1) 0%, rgba(74,31,130,1) 100%); border: 2px solid var(--orange); border-radius: 10px; box-shadow: 0px 3px 6px rgba(1, 255, 255, 48%); }
.modal-header .btn-close { background-image: url("../images/close.png"); opacity: 1; }
.modal-body h3 { font-size: 22px; font-weight: 800; margin: 0px 30px 1rem; text-transform: uppercase; }
.modal-body .terms { background-color: var(--navy-blue); border-radius: 7px; margin: 0px 30px; padding: 25px 25px; }
.modal-body .frame { height: 430px; overflow: hidden; overflow-y: auto !important; scrollbar-width: none; }
.modal-body .frame::-webkit-scrollbar { display: none; }
.modal-footer { margin: 0px 30px; padding-top: 0px; }

.banner { clear: both; margin-bottom: 1.5rem; width: 100%; }
.banner img { border-radius: 7px; }

.room { color: var(--orange); font-size: 18px; text-decoration: underline; text-transform: uppercase; }
.room:hover { color: var(--orange); }

.tdata { background-color: var(--violet); border: 1px solid var(--light-violet); border-radius: 10px; clear: both; margin: 0px 0px 10px; width: 100%; }
.tdata:nth-child(even) { background-color: transparent; border: 1px solid rgba(175, 123, 232, 30%); border-radius: 10px; clear: both; margin: 0px 0px 10px; width: 100%; }
.tdata .table { margin: 0px; }
.tdata .table tbody tr td { border: inherit; color: var(--bs-white); padding: 10px 10px; text-align: left; }
.tdata .table tbody tr td:first-child { width: 45px; }
.tdata .table tbody tr td.wait { color: var(--orange); }
.tdata .table tbody tr td.wait span { color: var(--bs-white); display: inline-block; margin-left: 20px }
.tdata .table tbody tr td a { color: var(--orange); text-decoration: underline; text-transform: uppercase; }

.modal-create { background: var(--bs-black); border-color: var(--pink); box-shadow: 2px 4px 8px var(--bs-black); padding: 1rem 3rem; }
.modal-create .form-control, .modal-create .form-select { background-color: var(--bs-white); border-color: var(--bs-pink); box-shadow: 0px 3px 6px var(--bs-black); color: var(--bs-black); font: 300 17px var(--secondary-font); }
.modal-create .form-control::placeholder { color: var(--bs-black); }
.modal-create .form-control.display { background-color: var(--bs-white); border-color: var(--pink); border-width: 2px; box-shadow: inset 2px 4px 8px var(--bs-black), 2px 4px 8px var(--bs-black); color: var(--bs-black); }
.modal-create .form-control.display::placeholder { color: var(--bs-black); }
.modal-create .form-select { background-image: url("../images/pyn.png") }
.modal-create h2 { font-size: 23px; }
.modal-create h2 small { font-size: 21px; }
.modal .terms a { font-size: 11px; margin: 0px 5px; text-decoration: underline; text-transform: uppercase; }
.modal .terms a:hover { color: var(--orange); }

.panel-wrap { position: fixed; top: 0; bottom: 0; right: 0; width: 380px; transition: .3s ease-out; margin-right: -345px; z-index: 1049; }
.panel-wrap .btn-chat { background-color: var(--orange); border-color: var(--orange); border-radius: 10px 10px 0px 0px; box-shadow: 0px 3px 6px rgb(0, 0, 0); color: var(--bs-white); font: 800 15px var(--primary-font); left: 0; line-height: 30px; margin: 115% 0px 0px -97px; position: absolute; top: 0; transform: rotate(-90deg); text-transform: uppercase; width: 220px; z-index: -1; }
.panel-wrap .btn-chat:focus { background-color: var(--orange); border-color: var(--orange); }
.chat { background-color: var(--orange); position: absolute; top: 0; bottom: 0; left: inherit; right: 0; padding: 18px; width: 345px; }
.chat-box { background-color: var(--orange); position: relative; clear: both; height: 100%; width: 100%; }
.chat-box .header { background-color: var(--orange); clear: both; padding: 18px; width: 100%; }
.chat-box .message-list { background-color: #5C299D; border: 1px solid #5C299D; color: var(--bs-white); border-radius: 30px;  font-size: 14px; font-weight: 800; padding: 7px 15px; text-transform: uppercase; width: 100%; }
.chat-box .messages { clear: both; height: 70%; overflow: hidden; overflow-y: auto; scrollbar-width: none; padding: 0px 18px; width: 100%; }
.chat-box .messages::-webkit-scrollbar { display: none; }
.chat-box .messages-panel { background-color: #092231; border: 2px solid var(--light-violet); border-radius: 10px; margin-bottom: 1rem; padding: 12px; width: 100%; }
.chat-box .messages-panel img { border: 2px solid #01FFFF; border-radius: 100%; }
.chat-box .messages-panel h3 { font-size: 14px; font-weight: bold; margin: 0px; text-transform: uppercase; }
.chat-box .messages-panel p { font-size: 12px; margin: 0px; }
.chat-box .message-box { background-color: var(--orange); clear: both; padding: 18px 18px; width: 100%; }
.chat-box .message-box .form-control { background-color: #092231; border: none; border-radius: 7px; color: var(--gray); font: 500 15px var(--primary-font); height: 38px; }
.chat-box .message-box .form-control:focus { box-shadow: none; }
.chat-box .message-box .sub { color: var(--gray); font-size: 14px; }
.chat-box .message-box .btn-subnit { background-color: var(--light-violet); color: var(--bs-white); font: 400 14px var(--primary-font); }

.panel-bal { position: fixed; top: 0; bottom: 0; right: 0; width: 544px; transition: .3s ease-out; margin-right: -497px; z-index: 1050; }
.panel-bal .btn-balance { background-color: var(--pink); border-color: var(--pink); border-radius: 10px 10px 0px 0px; box-shadow: 0px 3px 6px rgb(0, 0, 0); color: var(--bs-white); font: 800 15px var(--primary-font); left: 0; line-height: 30px; margin: 37% -88px 0px -85px; position: absolute; top: 0; transform: rotate(-90deg); text-transform: uppercase; width: 220px; z-index: -1; }
.panel-bal .btn-balance:focus { background-color: var(--pink) !important; border-color: var(--pink) !important; }
.bala { background-color: var(--pink); position: absolute; top: 0; bottom: 0; left: inherit; right: 0; color: #eee; overflow: auto; padding: 4% 7%; width: 497px; }

.nav-fill .nav-item .nav-link { border-bottom: 5px solid var(--light-pink); border-radius: 0px; color: #A3442C; font: 800 14px var(--primary-font); padding: .5rem .5rem; text-transform: uppercase; }
.nav-pills .nav-link.active { background-color: transparent; border-color: #874DCD; color: #874DCD; }

.tab-content picture img { border-radius: 100%; border: 3px solid #874DCD; }
.tab-content h3 { font-size: 18px; font-weight: 800; }
.tab-content h3 span { font-size: 14px; font-weight: 400; }

.tab-content .table thead tr th { background-color: transparent; font: 800 12px var(--primary-font); text-transform: uppercase; }
.tab-content .table thead tr th, .table tbody tr td { border: inherit; color: var(--bs-white); padding: 8px 10px; text-align: left; }
.tab-content .table tbody tr { background: rgb(2,2,2); background: linear-gradient(-90deg, rgba(2,2,2,1) 0%, rgba(74,31,130,1) 100%); background: -moz-linear-gradient(-90deg, rgba(2,2,2,1) 0%, rgba(74,31,130,1) 100%); background: -webkit-linear-gradient(-90deg, rgba(2,2,2,1) 0%, rgba(74,31,130,1) 100%); }
.tab-content .table tbody tr:nth-child(even) {background: rgb(255,255,255); background: linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(191,149,238,1) 100%); background: -moz-linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(191,149,238,1) 100%); background: -webkit-linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(191,149,238,1) 100%); }
.tab-content .table tbody tr:nth-child(even) td { color: #020202; }
.tab-content .table tbody tr td { font: 500 12px var(--secondary-font); }

.claimer { bottom: 10px; color: var(--bs-white); font: 400 12px var(--primary-font); position: absolute; left: 0; padding: 12p 12px; text-align: center; text-transform: uppercase; width: 100%; }
.claimer a { color: var(--bs-white); margin: 0px 5px; text-decoration: underline; }

.result { background: rgb(2,2,2); background: linear-gradient(90deg, rgba(2,2,2,1) 0%, rgba(74,31,130,1) 100%); border: 2px solid #874DCD; border-radius: 10px; margin-bottom: .5rem; padding: 12px 12px; width: 100%; }
.result h4 { font-size: 15px; font-weight: 800; margin: 0px; text-transform: uppercase; }
.result h5 { font-size: 10px; font-weight: 800; margin: 0px; text-transform: uppercase; }
.result p { font: 300 13px var(--secondary-font); margin: 0px; }
.result p a { color: var(--bs-white); text-decoration: underline; }

.pagination { background: rgb(2,2,2); background: linear-gradient(90deg, rgba(2,2,2,1) 0%, rgba(74,31,130,1) 100%); margin: 0px auto; max-width: 316px }
.page-link { background-color: transparent; border-color: var(--bs-white); color: var(--bs-white); font-family: var(--secondary-font); }
.page-link:hover, .page-link:focus { background-color: transparent; border-color: var(--yellow); box-shadow: none; color: var(--yellow); }
.page-link.active { background-color: #BF95EE; border-color: var(--bs-white); color: #222222; }
.page-item:first-child .page-link, .page-item:last-child .page-link { border: 1px solid var(--bs-white); border-radius: 0px; }
.page-item:first-child .page-link { border-right-color: var(--bs-white); color: var(--light-pink); }
.page-item:last-child .page-link { border-left-color: var(--bs-white);  color: var(--light-pink); }

.back { color: var(--bs-white); font-size: 16px; font-weight: 700; text-transform: uppercase; }

.match { clear: both; width: 100%; }
.match .nav-pills .nav-link { border-radius: 0px; color: #874DCD; font: 500 20px var(--secondary-font); text-transform: uppercase; }
.match .nav-pills .nav-link.active { border-bottom: 2px solid var(--orange); color: var(--orange); }
.match .tab-content .tdata { background-color: var(--violet); border: 1px solid var(--light-violet); border-radius: 10px; clear: both; margin: 0px 0px 10px; width: 100%; }
.match .tab-content .tdata:nth-child(even) { background-color: transparent; border: 1px solid rgba(175, 123, 232, 30%); border-radius: 10px; clear: both; margin: 0px 0px 10px; width: 100%; }
.match .tab-content .tdata .table { margin: 0px; }
.match .tab-content .tdata .table tbody tr { background: inherit; }
.match .tab-content .tdata .table tbody tr td { border: inherit; color: var(--bs-white); font: 500 17px var(--secondary-font); padding: 10px 10px; text-align: left; }
.match .tab-content .tdata .table tbody tr td:first-child { width: 45px; }
.match .tab-content .tdata .table tbody tr td.wait { color: var(--orange); }
.match .tab-content .tdata .table tbody tr td.wait span { color: var(--bs-white); display: inline-block; margin-left: 20px }
.match .tab-content .tdata .table tbody tr td a { color: var(--orange); text-decoration: underline; text-transform: uppercase; }

.gme_bg { background: url("../images/gme_bg.jpg") no-repeat 0% 0% / 100% 100%; clear: both; height: 800px; margin: 0px auto; width: 1280px; }
.section { margin: 3.5rem auto 1rem; width: 448px; }
.player { background-color: #092231; border: 1px solid var(--orange); border-radius: 10px; padding: 12px 12px; width: 100% }
.player h5 { font-size: 10px; font-weight: 800; margin: 0px; }
.player .time { color: var(--orange); font-size: 10px; font-weight: 800; }
.btn-ready { line-height: 34px; width: 200px; }
.info p { font-size: 12px; text-align: center; }

.match_game { background: url("../images/match_bg.jpg") no-repeat top center / cover; border-radius: 25px; clear: both; height: 650px; width: 100% }
.match_game .cover { clear: both; padding-top: 30%; width: 100%; }
.match_game .progress { background-color: transparent; border: 3px solid #ffcdea; border-radius: 0px; box-shadow: inset 0px 0px 20px #f5316c, 0px 0px 20px #f5316c; height: 40px; margin: 0 auto 30px; padding: 4px 4px; position: relative; width: 80%; }
.match_game .progress-bar { background-color: #ff0000; opacity: 0.75; }
.match_game .progress span { color: var(--bs-white); display: block; font: 500 25px var(--secondary-font); left: 0; position: absolute; top: 0; text-align: center; width: 100%; z-index: 1; }
.match_game p { color: var(--bs-white); font: 400 12px var(--secondary-font); text-align: center; text-transform: uppercase; }
.match_game .btn-orange { line-height: 29px; width: 225px; }

.frame { clear: both; margin: 0px auto; padding-top: 1px; width: 350px; }
.frame .section { margin-top: 50px; width: 350px; }
.square-game { clear: both; margin: 0px auto; width: 350px; }
.square-game .dice-red { background-color: #C63134; border: 4px solid #FD373B; border-radius: 7px; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 0.5), 3px 4px 8px #A3442C; display: block; height: 50px; width: 50px; }
.square-game .dice-red:hover, .square-game .dice-red.active { background-color: #fff; }
.square-game .dice-violet { background-color: #5C299D; border: 4px solid #874DCD; border-radius: 7px; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 0.5), 3px 4px 8px #4A1F82; display: block; height: 50px; width: 50px; }
.square-game .dice-violet:hover, .square-game .dice-violet.active { background-color: #fff; }

.reload-red, .reload-violet { position: absolute; top: 0; width: 38px; z-index: 1; }
.reload-red .refresh { background-color: #C63134; border: 4px solid #FD373B; border-radius: 50%; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 0.5), 3px 4px 8px #A3442C; display: block; height: 38px; margin: 8px 0px; padding: 1px 6px 6px 6px; width: 38px; }
.reload-red .refresh:hover, .reload-red .refresh.active  { background-color: #FE8529; }
.reload-violet .refresh { background-color: #5C299D; border: 4px solid #874DCD; border-radius: 50%; box-shadow: inset 3px 4px 8px rgba(0, 0, 0, 0.5), 3px 4px 8px #4A1F82; display: block; height: 38px; margin: 8px 0px; padding: 1px 6px 6px 6px; width: 38px; }
.reload-violet .refresh:hover, .reload-violet .refresh.active  { background-color: #FE8529; }
.leftout { left: 0; margin: 35px 0pc 0px -50px; }
.rightout { right: 0; margin: 35px -50px 0px 0px; }

.game { background: url("../images/gme_bg.jpg") no-repeat top center / cover; clear: both; margin: 0px auto; height: 100%; min-height: 800px; max-width: 1280px; width: 100% }
.game .cover { clear: both; display: flex; align-items: center; height: 100%; width: 100%; }
.game .progress { background-color: transparent; border: 3px solid #ffcdea; border-radius: 0px; box-shadow: inset 0px 0px 20px #f5316c, 0px 0px 20px #f5316c; height: 40px; margin: 0 auto 30px; padding: 4px 4px; position: relative; width: 80%; }
.game .progress-bar { background-color: #ff0000; opacity: 0.75; }
.game .progress span { color: var(--bs-white); display: block; font: 500 25px var(--secondary-font); left: 0; position: absolute; top: 0; text-align: center; width: 100%; z-index: 1; }
.game p { color: var(--bs-white); font: 400 12px var(--secondary-font); text-align: center; text-transform: uppercase; }
.game .btn-orange { line-height: 29px; width: 225px; }
.game .square-game { width: 448px; }
.game .square-game .dice-red, .game .square-game .dice-violet { border-width: 5px; border-radius: 10px; height: 66px; width: 66px; }
.game .reload-red .refresh, .game .reload-violet .refresh { border-width: 5px; height: 53px; padding: 5px 8px 8px 8px; width: 53px; }
.game .reload-red, .game .reload-violet { width: 53px; }
.game .leftout { margin-left: -65px; }
.game .rightout { margin-right: -65px; }
.clickable{cursor: pointer;}

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    h1 { font-size: 18px; margin-bottom: .725rem; }
    #sidebar { margin-left: -250px; }
    #sidebar.active { height: 100%; min-height: 100vh; margin-left: 0; position: absolute; z-index: 1050; }
    #content { margin-left: auto; padding: 54px 0px 0px; width: 100%; }
    #content .container-fluid { padding: 0px 12px; }
    .sidebarCollapse, .navbar .logo { display: inline-block; }
    .navbar { background-color: var(--bs-black); display: block; }
    marquee { border-radius: 0px; }
    .carousel h1 { font-size: 22px; margin-bottom: .5rem; }
    .carousel .carousel-caption { right: 5%; left: 5%; bottom: 0rem; }
    .btn-pink, .btn-orange { border-radius: 7px; font-size: 9px; width: 100px; }
    .carousel .mb-4 { margin-bottom: .5rem !important; }
    .carousel-indicators [data-bs-target] { height: 3px; width: 24px; }
    .carousel-indicators .active { width: 50px; }
    .subhead { font-size: 11px; }
    .table thead tr th { font-size: 12px; }
    .table tbody tr td { font-size: 11px; }
    .table tbody tr td img { max-width: 34px; }
    footer { border-width: 3px; padding: 30px 0px; text-align: center; }
    footer picture { margin: 0px; max-width: 255px; }
    .modal-header { padding: 10px 15px 0px; }
    .modal-body h3 { font-size: 14px; margin: 0px 0px .5rem; }
    .modal-body h3 img { max-width: 15px;  }
    .modal-body .terms, .modal-footer { margin: 0px; }
    .modal-body .frame p { font-size: 10px; }
    .btn-wallet { font-size: 10px; margin: 53% -54px 0px 0px; width: 146px; }
    .head h1 { font-size: 12px; }
    .room { font-size: 10px; }
    .tdata .table tbody tr td { font-size: 8px; padding: 5px 5px; }
    .modal-create { padding: 1rem 1rem; text-align: center; }
    .modal-create picture { display: inline-block; margin-bottom: .5rem; max-width: 90px; }
    .modal-create h1 { font-size: 14px; }
    .modal-create h2 { font-size: 18px; }
    .modal-create h2 span { font-size: 10px; font-weight: 400; }
    .modal-create .form-control, .modal-create .form-select { font-size: 11px; }
    .sm-space { margin: 3rem 0rem; }
    .modal-create h2 small br { display: block; }
    .panel-wrap { margin-right: -267px; width: 305px; }
    .panel-wrap .btn-chat { font-size: 13px; line-height: 30px; margin: 120% 0px 0px -55px; width: 145px; }
    .chat { width: 267px; }
    .chat-box { border-radius: 10px; }
    .chat-box .header { border-radius: 10px 10px 0px 0px; padding: 18px 0; }
    .chat-box .messages-panel h3 { font-size: 13px; }
    .chat-box .messages-panel p { font-size: 12px; }
    .chat-box .messages { padding: 0; }
    .chat-box .message-box { border-radius: 0px 0px 10px 10px; padding: 18px 0px; }
    .panel-bal { margin-right: -310px; width: 350px; }
    .panel-bal .btn-balance { font-size: 13px; line-height: 30px; margin: 55% 0px 0px -54px; width: 145px; }
    .panel-bal .bala { padding: 12px 12px; width: 310px; }
    .nav-fill .nav-item .nav-link { font-size: 9px; }
    .tab-content h3 { font-size: 13px; }
    .tab-content h3 span { font-size: 10px; }
    .result h4 { font-size: 9px; }
    .result h5 { font-size: 7px; }
    .result p, .page-link { font-size: 8px; }
    .pagination { max-width: 247px; }
    .tab-content .table thead tr th, .tab-content .table tbody tr td { font-size: 9px }
    .gme_bg { max-width: 345px; width: 100%; }
    .section { width: 300px; }
    .player { padding: 8px 8px }
    .player h5, .player .time { font-size: 6px; }
    .btn-ready { line-height: 18px; width: 134px; }
    .info p { font-size: 8px; }
    .match_game { border-radius: 17px; height: 464px; }
    .match_game p, .game p { font-size: 8px; }
    .match_game .cover { padding-top: 55%; }
    .match_game .progress, .game .progress { border-width: 2px; height: 25px; }
    .match_game .progress span, .game .progress span { font-size: 15px; }
    .match_game .btn-orange { line-height: 20px; width: 137px; }
    .square-game, .frame { width: 236px; }
	.frame .section { margin-top: 20px; width: 236px; }
	.square-game .dice-red, .square-game .dice-violet { border-width: 3px; height: 33px; width: 33px; }
	.reload-red, .reload-violet { margin-top: 15px; }
	.reload-red .refresh, .reload-violet .refresh { height: 33px; padding-top: 1px; width: 33px; }
	.game { min-height: 464px; max-width: 345px; width: 100%; }
	.game .square-game{ width: 265px; }
	.game .square-game .dice-red, .game .square-game .dice-violet { border-width: 3px; border-radius: 7px; height: 39px; width: 39px; }
	.game .reload-red, .game .reload-violet { margin-top: 15px; }
	.game .reload-red .refresh, .game .reload-violet .refresh { border-width: 3px; height: 33px; padding: 1px 6px 6px 6px; width: 33px; }
	.game .leftout { margin-left: -40px; width: 33px }
	.game .rightout { margin-right: -40px; width: 33px }
    .game-dice{width: 19px; margin-top: 0px !important;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #sidebar { width: 225px; }
    #content { margin-left: 225px; padding: 30px 12px 0px; width: calc(100% - 225px); }
    .carousel h1 { font-size: 30px; }
    .carousel .carousel-caption { bottom: 0rem; }
    .hilite h2 { font-size: 28px; }
    .hilite p { font-size: 12px; }
    .subhead { font-size: 12px; }
    .table thead tr th { font-size: 14px; }
    .table tbody tr td { font-size: 13px; }
    .table tbody tr td img { max-width: 45px; }
    footer picture { margin-left: 15%; max-width: 355px; }
    .modal-body h3 { font-size: 18px; margin: 0px 0px .5rem; }
    .modal-body h3 img { max-width: 25px;  }
    .modal-body .terms, .modal-footer { margin: 0px; }
    .modal-body .frame p { font-size: 12px; }
    .tdata .table tbody tr td { font-size: 12px; }
    .head h1 { font-size: 18px; }
    .modal-create { padding: 1rem 1rem; }
    .modal-create h1 { font-size: 14px; }
    .modal-create h2 { font-size: 18px; }
    .modal-create h2 span { font-size: 10px; }
    .modal-create .form-control, .modal-create .form-select { font-size: 11px; }
    .modal-create .btn-pink, .modal-create .btn-orange { border-radius: 7px; font-size: 9px; width: 100px; }
    .gme_bg { width: 100%; }
    .game { width: 100%; }
    .match_game .cover { padding-top: 55%; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
    #content { padding: 30px 25px 0px; }
    .carousel h1 { font-size: 42px; }
    .carousel .carousel-caption { bottom: 1rem; }
    .hilite h2 { font-size: 28px; }
    .hilite p { font-size: 12px; }
    .subhead { font-size: 11px; }
    .table thead tr th { font-size: 12px; }
    .table tbody tr td { font-size: 11px; }
    .table tbody tr td img { max-width: 35px; }
    footer picture { margin-left: 10%; max-width: 375px; }
    .tdata .table tbody tr td { font-size: 15px; }
    .gme_bg { width: 100%; }
    .game { width: 100%; }
}