table {
				border: 0;
				margin: 0;
				border-collapse: collapse;

				border-spacing: 0;
				font-size: 18px;
				font-family: Arial;
			}
            .forcebox{
				overflow:hidden;
			}
             body{
                
				 color: #999;
				background: linear-gradient(#141e30, #243b55);
				background-size: cover;
            }
			.layout-navbar-fixed .wrapper .content-wrapper {
				margin-top: calc(3.5rem + 1px);
			}

			.timer{
				font-size: 40px;
				margin-left: 30px;
				line-height: 40px;
			}
            .forcebox{
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				margin-bottom: 20px;
			}
			
			#game_countdown_1,#game_countdown_2,#game_countdown_3,#game_countdown_4,#game_videostatus_1,#game_videostatus_2,
			#game_videostatus_3,
			#game_videostatus_4{
				margin-bottom: 0;

			}
			#gameroom_name_4,#gameroom_name_3,#gameroom_name_2,#gameroom_name_1{
				margin-bottom: 2px;
			}

			#jsGrid2 .jsgrid-header-row :nth-child(3){
				color: #ff0000;
			}
			#jsGrid2 .jsgrid-header-row :nth-child(4){
				color: #0000ff;
			}
			#jsGrid2 .jsgrid-header-row :nth-child(5){
				color: #00ff00;
			}
			.font30{
				font-size: 22px;
			}
			table td,
			table th {
				padding: 0;
				border: 0px solid #d8d8d8;
				height: 42px;
				width: 42px;
				text-align: center;
				color: white;
			}
			.circle{
				width: 42px;
				height: 42px;
			}
			table th {
				font-weight: bold;
				color: #000;
			}
			.card-body{
               padding: 0;
			}
			

			#exit-button{
				background:transparent;
				border-width:0px;
				outline:none;
			}
			.video-box{
			   background-color: black;
			   position: relative;
				width: 400px;
				height: 260px;
			   padding-bottom: calc(100% * 9 / 16);
			}

			.video-box> canvas{
			   position: absolute;
			   top: 0;
			   left: 0;
			   width: 100%;
			   height: 100%;
			}
			.jsgrid-nodata-row>.jsgrid-cell{
               background: #141e30;
			}
			#jsGrid1 .jsgrid-header-row th{
				/*background: white;*/
			}
			#jsGrid2 .jsgrid-header-row th{
				/*background: white;*/
			}

			.red ,.redii,.circle1,.circle4,.circle5,.circle6{
				border-color: rgb(175,42,37);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border: 3px solid rgb(175,42,37);
                background:  rgb(175,42,37);;
                position: relative;
			}
			
			 .redCircle{
			     display:inline-block;
				 width: 42px;
				 height: 42px;
				border-color: rgb(175,42,37);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border: 5px solid rgb(175,42,37);
				  position: relative;
				  background:  rgb(175,42,37);
			 }
			 
			 .rediiCircle{
			     display:inline-block;
				 width: 42px;
				 height: 42px;
				border-color: rgb(175,42,37);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border: 5px solid rgb(175,42,37);
				  position: relative;
			 }
			 
			 

			.redii::after, .rediiCircle::after {
				content:'';
				width: 30px;
				display: block;
				height: 30px;
				border-color: rgb(175,42,37);
				border-radius: 50% ;
				-moz-border-radius: 50% ;
				-webkit-border-radius: 50%;
				border:  3px solid rgb(175,42,37);
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);

			}
			
			 .buleCircle{
			     display:inline-block;
				 width: 42px;
				 height: 42px;
				 border-color: rgb(31,90,168);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border:  5px solid rgb(31,90,168);
				  position: relative;
				   background:  rgb(31,90,168);
			 }
           .buleiiCircle{
			     display:inline-block;
				 width: 42px;
				 height: 42px;
				 border-color: rgb(31,90,168);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border:  5px solid rgb(31,90,168);
				  position: relative;
			 }
			.blue,.blueii,.circle2,.circle7,.circle8,.circle9 {
				border-color: rgb(31,90,168);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border:  5px solid rgb(31,90,168);
				position: relative;
				background: rgb(31,90,168);
			}

			.blueii::after,.buleiiCircle::after {
				content:'';
				width: 30px;
				display: block;
				height: 30px;
				border-color: rgb(31,90,168);
				border-radius: 50% ;
				-moz-border-radius: 50% ;
				-webkit-border-radius: 50%;
				border:  3px solid rgb(31,90,168);
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}

			.headerbg{
				background: none !important;
				text-align: left;
			}


			.green,.circle3,.circle10,.circle11,.circle12 {
				border-color: rgb(91,146,0);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border: 3px solid rgb(91,146,0);
				background: rgb(91,146,0);
				position: relative;
			}
			
			.greenCircle{
			     display:inline-block;
				 width: 42px;
				 height: 42px;
				border-color: rgb(91,146,0);
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border: 3px solid rgb(91,146,0);
			    background: rgb(91,146,0);
			 }

			.white {

				background-color: white;
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
			}

			.orange {
				background-color: orange;
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.orange:after{
				content: '标';
				line-height: 42px;
				color: #7F00FF;
				font-weight: bold;
				font-size: 30px;
			}

			.active_tip {
				/*border: 2px solid deepskyblue;*/
				animation: change 1s infinite;
			}


			@keyframes change {
				100% {
					filter: blur(0) drop-shadow(16px 0 40px rgba(51, 141, 231, 0.803));
					box-shadow: 0px 16px 20px rgba(51, 141, 231, 0.803);
					transition: 0.2s;
					border: 6px solid deepskyblue;
				}
			}
			.differentFlag {
				color: white;
			}

			#video-box {
				background-color: black;
				position: relative;
				width: 100%;
				height: 0;
				padding-bottom: calc(100% * 9 / 16);
			}
			#video-box > canvas{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.flexbox {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.video-aligner {
				width: 70%;
			}

			@media only screen and (max-width: 800px) {
				.video-aligner {
				width: 100%;
				}
			}
			.progress-group{
				display: flex;
				justify-content: end;
				margin-bottom: 1rem;
			}
			.showbtn{
				width: 70%;
				font-size: 25px;
			}
			.radiusbtn{
				width: 70%;
				font-size: 25px;
				border-radius: 100px;
			}
            .main-sidebar{
				display: none;
			}
			.content-wrapper,.main-header,.main-footer{
				margin-left: 0px !important;
			}
			.wrapper{
				background: #0a0e14;
				display: none;
			}
			.login-box{
				position: absolute;
                left: 50%;
				 top: 50%;
				  transform: translate(-50%,-50%);
				z-index: 9999;
			}
			.login-box .card-body{
				padding: 15px;
			}
			.login-box .card-body :nth-child(n){
				margin-top: 10px;
			}
			.login-box .card-body label{
				display: inline-block;
				width: 60px;
				text-align: right;
			}
			.btn-block+.btn-block {
			margin-top:0.7rem !important;
		}
			.login-box .card-body .layui-input{
               display: inline-block;
				background: #0a0e14 !important;
				height: 32px;
				width: 264px;
				color: #ffffff;
			}
			.playVedio4,.playVedio1,.playVedio2,.playVedio3{
				height:15%;
			}
			.playImg{
				width:90%;
				height:90%;
				filter: drop-shadow(#ff0 100px 0);
		        transform: translateX(-100px);
			}
			.login-box .layui-input-block{
				text-align: right;
			}
			input:-webkit-autofill,
			input:-webkit-autofill:hover,
			input:-webkit-autofill:focus,
			input:-webkit-autofill:active {
				-webkit-transition-delay: 99999s;
				-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
			}
			.connectShape span{
				border-radius: 50%;
				width: 50px;
                height: 50px;
				display: inline-block;
				background: #00ff00;
			}
			.connectWord {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #00ff00;
				margin-left: 5px;
			}
			.focus1{
				color: #FF00FF;
				font-weight: bold;
			}
			.focus2{
				color: yellow;
				font-weight: bold;
			}
			
			.star1{
               font-size: 40px;
				color: #FF00FF;
				display: none;
                width: 100px;
                padding-left: 10px;
				  padding-right: 10px;
			 }
			 .star2{
               font-size: 40px;
				color: yellow;
				display: none;
                width: 100px;
                padding-left: 10px;
				 padding-right: 10px;
			 }
			 .timebox{display:flex;}
			 .timerdown{width:15%;}
            .starbox{width:250px;}
			.circle4::after,.circle7::after,.circle10::after{
				content:'';
				width: 15px;
				display: block;
				height: 15px;
				border-color: red;
				border-radius: 50% ;
				-moz-border-radius: 50% ;
				-webkit-border-radius: 50%;
				background:  red;
				position: absolute;
	            right: 0;
				bottom: 0;
			}
			.circle5::after,.circle6::after,.circle8::after,.circle9::after,.circle11::after,.circle12::after{
				content:'';
				width: 15px;
				display: block;
				height: 15px;
				border-color: blue;
				border-radius: 50% ;
				-moz-border-radius: 50% ;
				-webkit-border-radius: 50%;
				background:  blue;
				position: absolute;
				right: 0;
				bottom: 0;
			}
			.circle6::before,.circle9::before,.circle12::before{
				content:'';
				width: 15px;
				display: block;
				height: 15px;
				border-color: red;
				border-radius: 50% ;
				-moz-border-radius: 50% ;
				-webkit-border-radius: 50%;
				background:  red;;
				position: absolute;
				left: 0;
				top: 0;
			}
			.circle-box{
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.touzhubox{
			  margin-top: 6rem;
			}
			.opHide,.otHide{
				display: none;
			}
			.opShow,.otShow{
				display: block;
				font-size: 30px;
				line-height: 35px;
				color: #ffff00;
			}
			.rx{
		        font-size:30px;
				vertical-align:middle;
				margin-left:15px;
			}
			.topmsg1,.topmsg2{margin-left:20px;font-size:30px;width: 500px;display: inline-block;}