*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
a{
	text-decoration:none;
}
li{
	list-style:none;
}
:root{
	--poppins: 'Poppins', sans-serif;
	--lato: 'Lato', sans-serif;
	--custome-1:#33CC66;
	--light: #F9F9F9;
	--blue: #3C91E6;
	--light-blue: #CFEBFF;
	--grey:#eee;
	--dark-grey:#AAAAA;
	--dark: #342E37;
	--red: #DB504A;
	--yellow:#FFCE26;
	--light-yellow:#FFF2C6;
	--orange:#FD7238;
	--light-orange:#FFE0D3;
}
body{
	background:var(--grey);
}

main .mybox{
		width:100%;
		height:auto;
		display:none;
		margin:5px;
		padding:10px;
}
/*SIDEBAR*/
#sidebar{
	position:fixed;
	top:0;
	left:0;
	width:280px;
	height:100%;
	background-color:var(--light);
	z-index:1000;
	font-family: var(--lato);
	transition: .3s ease;
	overflow-x:hidden;
}
#sidebar.hide{
	width:60px;
}
#sidebar .brand{
	font-size:24px;
	font-weight:700;
	height:56px;
	display:flex;
	align-items:center;
	color: var(--blue);
}
#sidebar .brand img{
	width:50px;
	height:50px;
	display:flex;
	align-items:center;
	justify-content: center;
	margin:13px 16px -16px 110px;
}
#sidebar .side-menu{
	width:100%;
	margin-top:48px;
}
#sidebar .side-menu li{
	background:transparent;
	height:48px;
	margin-left:6px;
	border-radius: 48px 0 0 48px;
	padding: 4px;
}
#sidebar .side-menu li.active{
	background: var(--grey);
	position:relative;
	
}

#sidebar .side-menu li.active::before {
	content: '';
	position: absolute;
	width:40px;
	height:40px;
	border-radius:50%;
	top:-40px;
	right:0;
	box-shadow: 20px 20px 0 var(--grey);
	z-index:-1;
}
#sidebar .side-menu li.active::after {
	content: '';
	position: absolute;
	width:40px;
	height:40px;
	border-radius:50%;
	bottom:-40px;
	right:0;
	box-shadow: 20px -20px 0 var(--grey);
	z-index:-1;
}
#sidebar .side-menu li a{
	height:100%;
	width:100%;
	background:var(--light);
	align-items:center;
	display:flex;
	border-radius:48px;
	font-size:16px;
	color: var(--dark);
	white-space:nowrap;
	overflow-x:hidden;
}
#sidebar.hide .side-menu li.active a{
	color:var(--blue);	
}
#sidebar.hide .side-menu li a{
	width: calc(48px - (4px * 2));
	transition: width .3s ease;
}
#sidebar.hide .brand img{
	width:40px;
	height:40px;
	margin-left:15px;
	
}
#sidebar .side-menu.top li a.logout{
	color:var(--red);
}
#sidebar .side-menu.top li a:hover{
	color: var(--blue);
}
#sidebar .side-menu li a .fa{
	min-width: calc(60px - ((4px + 6px) * 2));
	display: flex;
	justify-content: center;
}
#sidebar .side-menu li a .fa-solid{
	min-width: calc(60px - ((4px + 6px) * 2));
	display: flex;
	justify-content: center;
}
#sidebar .side-menu li a .fa-brands{
	min-width: calc(60px - ((4px + 6px) * 2));
	display: flex;
	justify-content: center;
}
#sidebar .side-menu li a .fa-regular{
	min-width: calc(60px - ((4px + 6px) * 2));
	display: flex;
	justify-content: center;
}


/*SIDEBAR END*/
/*CONTENT START*/
#content{
	position:relative;
	width: calc(100% - 280px);
	left: 280px;
	transition: .3s ease;
}
#sidebar.hide ~ #content{
	width: calc(100% - 60px);
	left:60px;	
}
#content nav{
	height:56px;
	background-color:var(--light);
	padding:0 24px;
	display:flex;
	align-items:center;
	grid-gap:24px;
	font-family: var(--lato);
	position:relative;
}
#content nav::before{
	content:'';
	width:40px;
	position:absolute;
	height:40px;
	bottom:-40px;
	left:0;
	border-radius:50%;
	box-shadow:-20px -20px 0 var(--light);
}
#content nav a{
	color: var(--dark);
}
#content nav .fa.fa-bars{
	cursor:pointer;
}
#content  nav .nav-link{
	font-size:16px;
	transition: .3s ease;
}
#content nav .nav-link:hover{
	color: var(--blue);
}
#content nav form{
	max-width:400px;
	width:100%;
	margin-left:auto;
}
#content nav form .form-input{
	display:flex;
	align-items:center;
	height:36px;
}
#content nav form .form-input input{
	flex-grow:1;
	padding:0 16px;
	height:100%;
	border:none;
	background: var(--grey);
	border-radius:36px 0 0 36px;
	outline:none;
}
#content nav form .form-input button{
	width:36px;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background: var(--blue);
	color:var(--light);
	font-size:18px;
	border:none;
	outline:none;
	border-radius:0 36px 36px 0;
	cursor:pointer;
}
#content nav .notification{
	font-size:20px;
	position:relative;
}
#content nav .notification .number{
	position:absolute;
	top:-6px;
	right:-6px;
	width:20px;
	height:20px;
	border-radius:50%;
	border:2px solid var(--light);
	background:var(--red);
	color: var(--light);
	font-weight:700;
	font-size:12px;
	display:flex;
	justify-content:center;
	align-items:center;
	
}
#content nav .profile img{
	width:36px;
	height:36px;
	object-fit:cover;
	border-radius:50%;
}
/*CONTENT END*/
/*Main Start*/
#content main{
	width::100%;
	padding:36px 24px;
	font-family: var(--poppins);
}
#content main .head-title{
	display:flex;
	align-items:center;
	justify-content: space-between;
	grid-gap:16px;
	flex-wrap: wrap;
}
#content main .head-title .left h1{
	font-size:36px;
	font-weight:600;
	margin-bottom:5px;
	color:var(--dark);
}
#content main .head-title .left .breadcrumb{
	display:flex;
	align-items:center;
	grid-gap:16px;
}
#content main .head-title .left .breadcrumb li{
	color: var(--dark);
}
#content main .head-title .left .breadcrumb li a{
color: var(--dark-grey);
pointer-events: none;
}
#content main .head-title .left .breadcrumb li a.active{
color: var(--blue);
pointer-events: unset;
}
#content main .head-title .btn-download{
	height:36px;
	padding:0 16px;
	border-radius:36px;
	background: var(--blue);
	color: var(--light);
	display:flex;
	align-items:center;
	justify-content:center;
	grid-gap:10px;
	font-weight:500;
}

#content main .box-info{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
	grid-gap:24px;
	margin-top:36px
}

#content main .box-info li{
	padding:20px;
	border-radius:20px;
	background: var(--light);
	display:flex;
	align-items:center;
	grid-gap:24px;
}
#content main .box-info li .fa{
	width:80px;
	height:80px;
	border-radius:10px;
	background:var(--grey);
	font-size:36px;
	justify-content:center;
	align-items:center;
	display:flex;
}

#content main .box-info li:nth-Child(1) .fa{
	background: var(--light-blue);
	color: var(--blue);
} 
#content main .box-info li:nth-Child(2) .fa{
	background: var(--light-yellow);
	color: var(--yellow);
} 

#content main .box-info li:nth-Child(3) .fa{
	background: var(--light-orange);
	color: var(--orange);
} 
#content main .box-info li .text h3{
	font-size:24px;
	font-weight:600;
}

#content main .table-data{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 24px;
	margin-top: 24px;
	width:100%;
	color:var(--dark);
}
#content main .table-data > div{
	border-radius:20px;
	background: var(--light);
	padding:24px;
}
#content main .table-data .head{
	display:flex;
	align-items:center;
	grid-gap:16px;
	margin-bottom:24px;
	
}
#content main .table-data .head h3{
	margin-right:auto;
}
#content main .table-data .order{
	flex-grow:1;
	flex-basis:500px;
	
}
#content main .table-data .order table{
	width:100%;
	border-collapse:collapse;
}
#content main .table-data .order table th{
	font-size:12px;
	padding-bottom:12px;
	text-align:left;
	border-bottom:1px solid var(--gray);
	
}
#content main .table-data .order table td{
	padding:16px 0;
}
#content main .table-data .order table tr td:first-child{
	display:flex;
	align-items:center;
	grid-gap:12px;
}

#content main .table-data .order table  td img{
	object-fit:cover;
	height:36px;
	width:36px;
	border-radius:50px;
	
}
#content main .table-data .todo{
	flex-grow:1;
	flex-basis:300px;
}

/*Sign up Start*/
#content main .form_wrap{
	position:relative;
	max-width:900px;
	width:100%;
	background-color: #fff;
	border-radius:6px;
	padding:30px;
	margin:0 15px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	overflow:none;

	
}
#content main .form_wrap header{
	position:relative;
	font-size:20px;
	font-weight:600;
	color:#333;
}
#content main .form_wrap header::before{
	content:"";
	position:absolute;
	left:0;
	bottom:-2px;
	height:3px;
	width:27px;
	background-color:var(--blue);
	border-radius:8px;

}
#content main .form_wrap form{
	position:relative;
	margin-top: 16px;
	min-height:490px;
	background-color: var(--light);
	overflow:none;
	
}
#content main .form_wrap .details{
	margin-top:30px;
}
#content main .form_wrap .title{
	display:block;
	margin-bottom:8px;
	font-size:16px;
	font-weight:500;
	margin:6px 0;
	color:333;
}
#content main .form_wrap form .fields{
	display:flex;
	align-items:center;
	justify-content: space-between;
	flex-wrap: wrap;
}
#content main .form_wrap form .fields .input-field{
	display:flex;
	width:calc(100% / 3 - 15px);
	background: ;
	flex-direction:column;
	margin:4px 0;
}
#content main .form_wrap form .input-field label{
	font-weight:500;
	font-size:12px;
	color:#2e2e2e;
}
#content main .form_wrap form .input-field input{
	height:30px;
	margin:8px 0;
	padding:0 15px;
	border:1px solid #aaa;
	outline:none;
	border-radius:5px;
	font-weight:400;
	font-size:14px;
	color:#333;
}
#content main .form_wrap form .input-field select{
	height:30px;
	margin:8px 0;
	padding:0 15px;
	border:1px solid #aaa;
	outline:none;
	border-radius:5px;
	font-weight:400;
	font-size:14px;
	color:#333;
}#content main .form_wrap form .input-field textarea{
	height:100px;
	margin:8px 0;
	padding:0 15px;
	border:1px solid #aaa;
	outline:none;
	border-radius:5px;
	font-weight:400;
	font-size:14px;
	color:#333;
}

#content main .form_wrap form .input-field select:is(:focus, :valid){
	box-shadow:0 3px 6px rgba(0,0,0,0.13);
}
#content main .form_wrap form .input-field input:is(:focus, :valid){
	box-shadow:0 3px 6px rgba(0,0,0,0.13);
}#content main .form_wrap form .input-field textarea:is(:focus, :valid){
	box-shadow:0 3px 6px rgba(0,0,0,0.13);
}
#content main .form_wrap form button{
	display:flex;
	align-items:center;
	justify-content:center;
	height:45px;
	max-width:200px;
	width:100%;
	border:none;
	outline:none;
	color:#fff;
	border-radius:5px;
	margin:25px 0;
	background-color:#4070f4; 
	transition: all 0.3s linear;
	cursor:pointer;
}
#content main .form_wrap form button:hover{
	background-color:#265df2;
}
#content main .form_wrap form button i{
	margin:0 6px;
}
/*Sign up Ends*/

/*Main Ends*/


/*Home Start*/
.content-table{
	border-collapse:collapse;
	margin:25px 0;
	font-size:0.9em;
	min-width:100%;
	background:var(--light);
	border-radius:5px 5px 0 0;
	overflow:hidden;
	box-shadow:0 0 20px rgba(0,0,0,0.15);
}
.content-table thead tr{
	background-color:#009879;
	color:#ffffff;
	text-align:left;
	font-weight:bold;
}
.content-table th, .content-table td{
	padding:12px 15px;
}
.content-table tbody tr{
	border-bottom:1px solid #dddddd;
}
.content-table tbody img{
	width:30px;
	height:30px;
	border:3px solid #ccc;
	border-radius:50%;
}
.content-table tbody tr:nth-child(even){
	background-color:#f3f3f3;
}
.content-table tbody tr:last-of-type{
	border-bottom:2px solid #009879;
}
.reg_sucess{
	background:var(--light);
	border-radius:5px;
	width:100%;
}

.reg_sucess header{
	font-weight:600;
	color:#ccc;
	padding:24px 24px 24px;
	background:#339900;
	text-align:center;
	justify-content:center;
	align-items:center;
	font-size:20px;
}
.reg_sucess p{
	margin-top:2em;
	margin-bottom:2.5em;
	font-style:italic;
	text-align:center;
	font-size:20px;
}
.link-btn{
	display: inline-flex;
	height:30px;
	padding:0;
	background:#009578;
	border:none;
	outline:none;
	border-radius:5px;
	overflow:hidden;
	font-family:'Quicksand', sans-serif;
	font-size:16px;
	font-weight:bold;
	cursor:pointer;
}
.link-btn:hover{
	
	background:#008168;
}.link-btn:active{
	
	background:#006e58;
}
.link_button_text,.link_button_icon{
	display:inline-flex;
	align-items:center;
	padding:0 5px;
	color:#fff;
	height:100%;
}
.link_button_icon{
	font-size:1.5em;
	background:rgba(0,0,0,0.08);
}
	#popup-container{
		position:fixed;
	top:50%;
	width:80%;
	padding:20px;
	border:1px solid #ccc;
	box-shadow: 0px 0px 10px #ccc;
	display:none;
	background:var(--light);
	left:15%
}
		#close-btn{
		float:right;
		cursor:pointer;
		}
#guess_wrap{
	background:#fff;
	padding:0 20px;
	border:1px solid var(--light-blue);
	border-radius:10px;
}#guess_wrap header{
		text-align:center;
		color:var(--light-blue);
		background:var(--blue);
		padding:0 0 10px;
		margin-bottom:5px;
		justify-content:center;
		font-weight:500;
		font-family:'Tahoma', sans-serif;
		font-size:15px;
}
#guess_wrap select{
	width:100%;
	height:35px;
	font-size:12px;
	font-weight:500;
}
.btn_toss{
	width:100px;
	color:green;
	background:var(--blue);
	border:none;
	outline:none;
	color:var(--light-blue);
	text-align:center;
	padding:10px;
	cursor:pointer;
	border-radius:5px;
}
.close{
	background:red;
	width:80px;
	text-align:center;
	border:none;
	border-radius:50%;
	padding:5px;
	color:var(--light);
	right:2em;
}

.center{
	position: absolute;
	top:210%;
	left:50%;
	transform: translate(-50%, -50%);
	width:400px;
	background:#fff;
	border-radius:10px;
}
.center h1{
	text-align:center;
	padding:10px 0 20px 24px;
	border-bottom:1px solid silver;
	font-style:italic;
	color:#000033;
font-family: montserrat;
}
.center form{
	padding:0 40px;
	box-sizing: border-box;
	
}
.center form .text_field{
	position:relative;
	border-bottom:2px solid #adadad;
	margin:30px 0;
}
.text_field input{
	width:100%;
	padding:0 5px;
	height:40px;
	font-size:16px;
	border:none;
	background:none;
	outline:none;
}
.text_field label{
	position: absolute;
	top:50%;
	left:5px;
	color:#adadad;
	transform: translateY(-50%);
	font-size:16px;
	pointer-events:none;
	transition: .5s;
}
.text_field span::before{
	content:'';
	position: absolute;
	top: 40px;
	left:0;
	width:100%;
	height:2px;
	background:#2691d9;
	transition: .5s;
}
.text_field input:focus ~ label,
.text_field input:valid ~ label{
	top:-5px;
	color:#2691d9;
}
.text_field input:focus ~ span::before,
.text_field input:valid ~ span::before{
	width:100%;
}
.pass{
	margin:-5px 0 20px 5px;
	cursor:pointer;
}
.pass a{
	color:#2691d9;
	text-decoration:none;
	transition:.5s;
}
.pass a:hover{
	text-decoration:underline;
}
input[type="submit"]{
	width:100%;
	height:50px;
	border:1px solid;
	background:#2691d9;
	font-size:18px;
	font-weight:500;
	border-radius:25px;
	color:#e9f4fb;
	cursor: poinetr;
	outline:none;
	
	
}
input[type="submit"]:hover{
	border-color:#2691d9;
	transition: .5s;
}
.signup_link{
	margin:30px 0;
	text-align:center;
	font-size:16px;
	color:#666666;
}
.signup_link a{
	color:#2691d9;
	text-decoration:none;
}
.signup_link a:hover{
	text-decoration:underline;
}
.head_tail{
	background:#FFF;
	padding:24px 24px;
	display:block;
	border-radius:25px;
}
/*Home Ends*/
@media screen and (max-width: 768px){
	#content{
	width: calc(100% - 60px);
}	
#content nav .nav-link{
		display: none;
	}
#content main .form_wrap form{
	overflow-y: none;
}
#content main .form_wrap form::-webkit-scrollbar{
	display:none;
}
#content main .form_wrap form .fields .input-field{
	width: calc(100% / 2 - 15px);
}
.ht_div{
	width:100%;

}
.soccer_div{
	width:100%;
	
}
.center{
	width:9+.....................0%;
}
}
@media screen and (max-width: 576px){
	
	#content nav form .form-input input{
		display:none;
	}
	#content nav form .form-input button{
		width: auto;
		height: auto;
		background: transparent;
		border-radius:none;
		color: var(--dark);
	}
	#content nav form.show .form-input input{
		display:block;
		width:100%;
	}
	#content nav form.show .form-input button{
		width:36px;
		height:100%;
		border-radius:0 36px 36px 0;
		color: var(--light);
		background: var(--red);
	}
	#content nav form.show ~ .notification,
	#content nav form.show ~ .profile{
		display:none;
	}
	#content main .form_wrap form .fields .input-field{
	width:100%;

}
.content-table{
	margin:20px 0;
	font-size:10px;
	border-radius:2px 2px 0 0;
	width:100%;
}
.center{width:90%;}
}