*{
	box-sizing: border-box;outline: none !important;
	/*font-family: 'Poppins', sans-serif;
	 font-family: 'Poppins', 'Tajawal', sans-serif;*/
	 font-family: 'Poppins','Noto Sans Arabic', serif;
}
*:not(input):not(textarea){
	-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin:0;padding: 0;
}
a{
	text-decoration: none;
	color: white;
	display: inline-block;
}

html,body{
	min-height: 100%;width: 100%;max-width: 100%;margin: 0;padding: 0;background-color: #e9e9ea;
}

body.HideScroll{
	overflow-y: hidden;
}

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.hidden{
	display: none !important;
}

.Invisible{
	visibility: hidden !important;
}

.FullWidth{
	width: 100%;
}


.MT50{
	margin-top: 50px !important
}
.MT40{
	margin-top: 40px !important
}
.MT30{
	margin-top: 30px !important
}

.MT20{
	margin-top: 20px !important
}

.MT10{
	margin-top: 10px !important
}



.MB40{
	margin-bottom: 40px !important
}
.MB30{
	margin-bottom: 30px !important
}

.MB20{
	margin-bottom: 20px !important
}

.MB10{
	margin-bottom: 10px !important
}



.Gap40{
    gap:40px;
}
.Gap30{
    gap:30px;
}
.Gap20{
    gap:20px;
}
.Gap10{
    gap:10px;
}

.TxtLeft{
	width: 100%;
	text-align: left;
}

.TxtCenter{
	width: 100%;
	text-align: center;
}
.TxtRight{
	width: 100%;
	text-align: right;
}


.XLTitle{
	font-size: 34px;
}
.LTitle{
	font-size: 24px;
}
.MTitle{
	font-size: 20px;
}
.STitle{
	font-size: 16px;
}
.XSTitle{
	font-size: 14px;
}

.FontW400{
	font-weight:400;
}

.FontW500{
	font-weight:500;
}

.FontW600{
	font-weight:600;
}
.FontW700{
	font-weight:700;
}

.WhiteWavesBg{
    background-image:url('../img/MenuIcons/WhiteGreyCirc.svg');
    background-size:cover;
    background-position:center top;
}



@media only screen and (max-width: 600px) {
	.Container{
		width:100%;
	}
}

@media only screen and (min-width: 600px) {
	.Container{
		max-width:560px;
	}
}

@media only screen and (min-width: 768px) {
	.Container{
		max-width:768px;
	}
}

@media only screen and (min-width: 992px) {
	.Container{
		max-width:960px;
	}
}
@media only screen and (min-width: 1200px) {
	.Container{
		max-width:1140px;
	}
}


.SaikoroBG{
	background-image: url("../img/BG/SaikoroDice.svg");
	background-size: cover;
	background-position: center center;
}




.PopUpWidow{
	width: 100%;
	height: 100%;
	background-color: #000000ab;
	position: fixed;
	top:0;
	left:0;
	z-index: 10000000000000000;

	display: flex;
	

    -moz-backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.BrandBtn.CancelApprovalMenu{
    background-color:#a6b3cf;
    color:black;
    margin:0 5px 0 0;
    font-weight: 500;
}

.BrandBtn.CancelApprovalMenu:hover{
    background-color:#8595b7
}

.WhiteMenuCont{
	width: 90%;
	max-width: 450px;
	max-height:80%;
	overflow-y:auto;
	-moz-border-radius:15px;
	-khtml-border-radius:15px;
	-webkit-border-radius: 15px;    
	border-radius: 15px;
	background-color: white;

	padding: 25px;
	margin:auto;
	position: relative;
}

.CloseBGLayer,.PopUpOverlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	cursor:pointer;
}

.WhiteMenuCont h3{
	width: 100%;
	padding: 0 55px 0 0;
	line-height: 35px;
}











/************************* NavBar ******************************************/
/*

.DarkNav .BrandIcon.Dark{
	display: block;
}
.BrightNav .BrandIcon.Dark{
	display: none;
}


.DarkNav .BrandIcon.Bright{
	display: none;
}
.BrightNav .BrandIcon.Bright{
	display: block;
}



.Navbar{
	padding:0 30px;
	position: fixed;
	z-index: 9999999999999999;
	top:0;
	left:0;
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.DarkNav .Navbar{
	background-color: #e8e8e9;
}






.MainLinks{
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.DarkNav .Navbar .MainLinks a{
	color: #101010;
}


.MainLinks a{
	display: block;
	padding: 0 20px;
	color: white;
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 14px;
    font-weight: 500;
}

.BrandLogoCont{
	height: 100%;
	padding: 15px;
}


.BrandIcon{
	height: 100%;padding:7px;
}



.Duration{
	background-color:white;
	display: inline-block;
	overflow: hidden;

	-moz-border-radius:150px;
	-khtml-border-radius:150px;
	-webkit-border-radius: 150px;    
	border-radius: 150px;
}
.CurrDur{
	cursor: pointer;
	padding:10px 27px;
	display: inline-block;
	font-size:13px;

	-moz-border-radius:150px;
	-khtml-border-radius:150px;
	-webkit-border-radius: 150px;    
	border-radius: 150px;
}
.CurrDur.Active{
	background-color: #284d9e;
	color: white;

	-webkit-box-shadow: 0px 0px 17px -6px rgb(0 0 0 / 60%);
    -moz-box-shadow: 0px 0px 17px -6px rgba(0,0,0,0.60);
    box-shadow: 0px 0px 17px -6px rgb(0 0 0 / 60%);
}







.MenuToggleBtn{
	padding: 25px 10px;
	width: 50px;
	height: 80px;
	display: inline-block;
}
.NavMenuBtn{
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: pointer;
}

.TransparentNav .Navbar.Opened{
	background-color:#00000087 ;
}


.Navbar.Showed.Opened .CloseNavMenu{
	display: block !important;
}

.Navbar.Showed .CloseNavMenu{
	display: none !important;
}


.Navbar.Showed .OpenNavMenu{
	display: block !important;
}

.Navbar.Showed.Opened .OpenNavMenu{
	display: none !important;
}



@media only screen and (max-width: 768px) {

	.TransparentNav .Navbar .NavMenuBtn {
		-webkit-filter: invert(1);
  	filter: invert(1);
	}



	.Navbar .MenuToggleBtn{
		display: inline-block;
	}


	.Navbar.Showed .MainLinks, .Navbar.Showed .SignInBtn,.Navbar.Showed .NavProfileDataCont{
		display: none !important;
	}


	.Navbar.Showed.Opened  .MainLinks{
		display: flex !important;
	}
	.Navbar.Opened .SignInBtn{
		display: block !important;
	}

	.Navbar.Opened .NavProfileDataCont{
		display: flex !important;
		width: 100%;
		color: white;
	}





	.Navbar .MainLinks{
		background-color: #1f2e4f;
		width: 100%;
		left:0;
		position: fixed;
		top:80px;
		height: 100%;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.Navbar .MainLinks a{
		flex-grow: 0;
		padding: 20px 30px;
		width: 100%;
		height: auto;
		align-self:flex-start;
		display: block;
		color: white;
		border-bottom: 1px solid #ffffff12;
	}

	.Navbar .MainLinks a:hover{
		background-color:#ffffff0f;
	}

	.DarkNav .Navbar .MainLinks a{
		color: white;
	}


	.Navbar .SignInBtn,.Navbar .NavProfileDataCont{
		position: fixed;
		bottom: 20px;
		width: 80%;
		text-align: center;
		left:10%;

	}



}

@media only screen and (min-width: 768px) {
	.Navbar .MenuToggleBtn{
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	
}

@media only screen and (min-width: 992px) {
	.Navbar .MenuToggleBtn{
		display: none;
	}
}
@media only screen and (min-width: 1200px) {
	.Navbar .MenuToggleBtn{
		display: none;
	}
}

*/















/************************* Teachers Navbar ******************************************/

.NavProfileDataCont{
	display: flex;
}

.NavProfileDataCont .NameImgCont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
}

.NavProfileDataCont .NameImgCont>img{
	width:50px;height: 50px;
	

	object-fit: cover;
	object-position: center center;

    margin-right: 15px;
    -moz-border-radius:10px;
		-khtml-border-radius:10px;
		-webkit-border-radius: 10px;    
		border-radius: 10px;
    -webkit-box-shadow: 0px 0px 40px -5px rgb(0 0 0 / 24%);
    -moz-box-shadow: 0px 0px 40px -5px rgba(0,0,0,0.24);
    box-shadow: 0px 0px 40px -5px rgb(0 0 0 / 24%);
}


.NavProfileDataCont .NavName{
	font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.NavProfileDataCont .NavJobTitle{
	font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.NavProfileDataCont .NavSettingsBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background-color:#dfdfdf/*lightgrey*/;
	-moz-border-radius:50%;
	-khtml-border-radius:50%;
	-webkit-border-radius: 50%;    
	border-radius: 50%;
}

.NavProfileDataCont .NavSettingsBtn:hover{
	background-color:#d1d1d1;
}

/************************* Footer ***********************************
.Footer{
	background-color: #293646;
	padding: 20px;
}
*******/











/************************* Login ******************************************/

.LoginHero{
	height: 100vh;
	min-height: 600px;
	width:100%;
	padding: 80px 30px 20px;
	position: relative;
	background-image: url('../img/BG/1.jpg');
	background-size: cover;
	background-position:center center;
}

.LoginHero.RegisterHero{
	min-height: 670px;
}

.LoginHero >.Overlay{
	top:0;
	left:0;
	
	-moz-backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	background-color: #00000075/*#00000050*/;
}

.BackgroundContainer{

	height: 100%;
	width: 100%;
	background-image: url('../img/BG/1.jpg');
	background-size: cover;
	background-position:center 30%;
	position: relative;
	-moz-border-radius:13px;
	-khtml-border-radius:13px;
	-webkit-border-radius: 13px;    
	border-radius: 13px;
	overflow: hidden;

	-webkit-box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 55%);
    -moz-box-shadow: 0px 0px 63px -5px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 55%);


    
    display: flex;
}


.Overlay{
	position: absolute;
	height: 100%;
	width:100%;
	background-color: #00000080;
}




.BrandBtn{
	padding:13px 55px;
	background-color: #284d9e;
	color: white;
	font-size:13px;
	cursor: pointer;
	outline: none;
	border:none;



	-moz-border-radius:8px;
	-khtml-border-radius:8px;
	-webkit-border-radius: 8px;    
	border-radius: 8px;



	-webkit-box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
    -moz-box-shadow: 0px 0px 63px -5px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
}

.BrandBtn:hover{
	background-color: #1f3f85;
}


.BrandBtn.Dark{
	background-color: #2e2e2e;
}
.BrandBtn.Dark:hover{
	background-color: #111111;
}


.LoginHero .FormContainer{			
	/*height: 100%;*/
	width: 300px;
	padding:40px 20px;
	display: flex;
	flex-direction: column;
	/*justify-content: center;*/
	align-items: center;
	position: relative;
	z-index: 9;
	color: white;
	margin: auto 0;
	margin-left: 20%;
	margin-left: calc(25% - 150px);



}


form{
	width:100%;

}

.InputCont{
	width: 100%;
	position: relative;
	top: 0;left: 0;
	margin-top:20px;
}
.FormContainer .BrandBtn{
	width: 100%;
}

/*Hide Show/Hide Eye in Edge*/
 input::-ms-reveal, input::-ms-clear {
	display: none !important;
}

.InputCont input{
	
	padding:10px;
	padding-left:35px;
	outline: none;
	border:none;
	color: white;

	background-color: transparent;

	border-bottom:2px solid white;
	width: 100%;
	position: relative;
	top:0;
	left:0;
}


.InputCont input::-webkit-input-placeholder {
	color: #e7e7e7;
}
.InputCont input::-moz-placeholder {
	color: #e7e7e7;
}
.InputCont input:-ms-input-placeholder {
	color: #e7e7e7;
}
.InputCont input:-moz-placeholder {
	color: #e7e7e7;
}
.InputCont input::placeholder {
	color: #e7e7e7;
}





.InputCont input + img {
	position: absolute;
	width: 22px;
	height: 22px;
	top:9px;left:5px;
	display: block;

	-khtml-opacity:.70; 
	-moz-opacity:.70; 
	-ms-filter:"alpha(opacity=70)";
	filter:alpha(opacity=70);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.70);
	opacity:.70;
}
.InputCont input:focus + img {
	-khtml-opacity:1; 
	-moz-opacity:1; 
	-ms-filter:"alpha(opacity=100)";
	filter:alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
	opacity:1;
}


#PasswordInput{
	padding-right: 34px;
}
.PasswordRevealBtn{
	cursor: pointer;
	width: 22px;
	height: 22px;
	position: absolute;
	top:9px;
	right: 5px;
	-khtml-opacity:.70; 
	-moz-opacity:.70; 
	-ms-filter:"alpha(opacity=70)";
	filter:alpha(opacity=70);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.70);
	opacity:.70;
}

.Separator{

	margin: 25px 0 10px;
	width: 100%;
	height: 2px;
	background-color: #FFFFFF30;
}

.SignInUpLinkCont{
	text-align: right;
}

.SignInUpLinkCont a,.SignInUpLinkCont p{
	display: inline-block;
	font-size: 14px;
	margin: 0;padding: 0;
}
.SignInUpLinkCont a{
	text-decoration: underline;
	margin-left: 10px;
}



















.TermsNCondCont .CheckBoxLabel{
	font-size: 13px;
	font-weight: 500;
	display: inline-block;
	text-align: left;
	margin-top: 20px;
	position: relative;word-wrap:break-word;
}

.TermsNCondCont.SignInUpLinkCont span{
	font-size: 13px;
	font-weight: 500;
	padding-left: 35px;
	display: inline-block;word-wrap:break-word;
}
.TermsNCondCont.SignInUpLinkCont a{
	font-size: 13px;
	font-weight: 500;
	margin-left: 2px;
	display: inline;word-wrap:break-word;
}

.TermsNCondCont input[type="checkbox"] {
	position: absolute;
	left:6px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #ffffffab;
	margin: 0;
	cursor: pointer;

	font: inherit;
	
	width: 20px;
	height: 20px;
	border: 2px solid transparent;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius: 5px;    
	border-radius: 5px;
	/*transform: translateY(-5px);*/
	margin-right: 5px;

	display: inline-grid;
	place-content: center;
}

.TermsNCondCont input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #000;
  /* Windows High Contrast Mode */
  background-color: black;
}

.TermsNCondCont input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.TermsNCondCont input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}


































.RadioBtnsCont{
    display:flex;justify-content:flex-start;align-items:flex-start;margin-top:10px;
}


.RadioCont {
    color:#3b3b3b;
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.RadioCont+.RadioCont{
    margin-left:30px;
}
.RadioCont input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    -moz-border-radius:50%;
    -khtml-border-radius:50%;
    -webkit-border-radius: 50%;    
    border-radius: 50%;
}
.RadioCont:hover input ~ .checkmark {
  background-color: #ccc;
}
.RadioCont input:checked ~ .checkmark {
  background-color: #284d9e;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.RadioCont input:checked ~ .checkmark:after {
  display: block;
}
.RadioCont .checkmark:after {
 	top: 7px;
	left: 7px;
	width: 8px;
	height: 8px;
	-moz-border-radius:50%;
	-khtml-border-radius:50%;
	-webkit-border-radius: 50%;    
	border-radius: 50%;
	background: white;
}










































@media only screen and (max-width: 600px) {
	.LoginHero .FormContainer{
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		padding: 0 40px
	}
}

@media only screen and (min-width: 600px) {
	.LoginHero .FormContainer{
		margin-left: 40%;
		margin-left: calc(40% - 150px);
	}
}

@media only screen and (min-width: 768px) {
	.LoginHero .FormContainer{
		margin-left: 20%;
		margin-left: calc(25% - 150px);
	}
}

@media only screen and (min-width: 992px) {

}

@media only screen and (min-width: 1200px) {

}




/********************************** Plans & Pricing Page ************************************/


.Container {
	width:100%;
	padding:20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.AllDataCont{
	min-height: 100vh;
	width:100%;
	padding: 110px 30px 20px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
}

.PlansTDur{
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.PlansTDur>p{
	display: inline-block;
	width:50%;
	color: #4b4a51;
}


.Duration{
	height: 40px;
	display: inline-block;
	flex-shrink: 0;
	/*width: 300px;*/
	margin-left:50px;
}

.AllPlansCont{
	display: flex;
	margin-top:40px;
	padding: 0 20px;
	background-color: #f8f8f8;

	-moz-border-radius:8px;
	-khtml-border-radius:8px;
	-webkit-border-radius: 8px;    
	border-radius: 8px;


	width: 100%;
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	align-items: stretch;
	gap:0 2%;
}

.PlanCont{
	width:30%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
    justify-content: space-between;
	margin:5px;
	padding:30px 20px;
	padding-top:40px;
	/*background-color: green;*/
}

.PlanCont.Active{
    margin-top: -20px;
    margin-bottom: -20px;
	background-color: #1f2e4f/*#489da2*/ !important;

	/*background: #284d9e !important;
	background: linear-gradient(45deg, #284d9e, #162f64) !important;*/

	background-color: #284d9e !important;
	background-image: url('../img/Icons/CheckBG.svg');


	padding-top:20px;

	-moz-border-radius:13px;
	-khtml-border-radius:13px;
	-webkit-border-radius: 13px;    
	border-radius: 13px;
}

.PlanCont.Active p{
	color: white;
}


.PlanCont.Active .PlanFeature{
	color: white;
}
/*PlanPrice*/


.PlanCont.Active .Tag{
	font-size:14px;
	font-weight: 600;
	padding: 5px 15px;
	background-color:white;
	flex-grow: 0;
	color: #284d9e;
	display: block;

	align-self: flex-end;

	-moz-border-radius:150px;
	-khtml-border-radius:150px;
	-webkit-border-radius: 150px;    
	border-radius: 150px;

	margin-bottom: 15px;
}


.PlanCont.Active .PlanFeature:before{
	background-image:url('../img/Icons/Check_ring_duotone_inverse.svg');
}









.PlanPrice{
	font-size:28px;
	font-weight: 700;
	color: #231d4f;
}

.PlanPrice> span{
	font-size: 16px;
	font-weight: 500;
	color: #4b4a51;
}

.PlanType{
	margin-top:10px;
	font-size:22px;
	font-weight: 500;
	color: #231d4f;
}

.PlanData{
	color:grey;
	margin-top: 5px;
	font-size:14px;
}



.FeaturesList{
	margin-top:15px;
}

.PlanFeature{
	margin-top: 5px;
	font-size: 14px;
	padding-left: 30px;
	position: relative;
}


.PlanFeature:before{
	content:"";
	display: inline-block;
	width:25px;
	height: 25px;
	background-image:url('../img/Icons/Check_ring_duotone.svg');
	background-position: center center;
	background-size:contain;
	position: absolute;
	top:0;left:0;
	top:calc(50% - 12.5px);
}


.PlanCont .BrandBtn{
	width:100%;
	margin-top:20px;
	text-align: center;
	font-weight: 500;

	background-color:#707c95/*#767676*/;
}
.PlanCont .BrandBtn:hover{
	background-color: #5b677f/*#5e5e5e*/;
}


.PlanCont.Active .BrandBtn{
	background-color: white;
	color: #1a1a1a;
}
.PlanCont.Active .BrandBtn:hover{
	background-color: #e9e9e9/*#f3f3f3*/;
}



    /************************** Teachers Profile ******************************************************/
    .ProfilePage{
        /*padding:90px 10px 0;*/
    }
    .ProfilePage .RightMainPage{
        width:100%;min-height:100vh;
        max-width: 700px;
        padding:25px 30px;
        
        margin:auto;
    }
    .ProfilePage h1{
        font-size:28px;
        width:100%;
        text-align:center;
    }


    .ProfilePage .FullScreen{
		width: 100%;
		padding:100px 10px 0;
		min-height: 100vh;
	}
	.dFlex{
	    display:flex;
	}
	.justifyCenter{
	    justify-content:center;
	}
	.justifySpaceBetween{
	    justify-content:space-between;
	}
	
	
	
	
	.FullScreen{
	    min-height:100vh;
	}
	
	
	.FullScreen.dFlex{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.LeftNav{
		flex-shrink: 0;
		width:250px;
		padding:20px;

		position: -webkit-sticky;
		position: sticky;
		top: 80px;

		height: 80vh;
		height: calc(100vh - 80px);
		overflow-y: auto;

	}
	.LeftNavNote{
        color: #3c3c3c;
        font-size: 14px;
	}
	.LeftNav .BackContainer{
		padding:5px 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.LeftNav .BackContainer > a{
		height: 40px;
		width:40px;
		margin-right: 10px;
		background-color: #dfdfdf/*lightgrey*/;
		display: inline-flex;
		justify-content: center;
		align-items: center;


		-moz-border-radius:50%;
		-khtml-border-radius:50%;
		-webkit-border-radius: 50%;    
		border-radius: 50%;
	}

	.LeftNav .BackContainer > a:hover{
		background-color:#d1d1d1;
	}

	.LeftNav .BackContainer > p{
		font-weight: 700;
		font-size:22px;
	}


	.LeftNavLinks{
		padding: 20px 0;
	}
	.LeftNavLinks a{
		color: #1c1c1c;
		font-size: 14px;
		font-weight: 500;
		padding: 7px 20px;
		margin-bottom: 5px;
	}

	.LeftNavLinks a:hover{
		background-color: #d1d1d1;
		-moz-border-radius:200px;
		-khtml-border-radius:200px;
		-webkit-border-radius: 200px;    
		border-radius: 200px;
	}


	.RightMainPage{
		width: 100%;
		background-color: white;
		padding: 35px;
        padding-top:90px;
		-moz-border-radius:15px;
		-khtml-border-radius:15px;
		-webkit-border-radius: 15px;    
		border-radius: 15px;
	}
	
	
	
	@media only screen and (max-width: 600px) {
	    .FullScreen{
	        width:100%;
	    }
	    .LeftNav{
	        display:none;
	    }
	    .RightMainPage{
	        width:100%;
	        padding:90px 20px 20px;
	        
	    }
	    .ProfPicDataCont{
	        margin:0 0 15px !important;
	    }
	    .AddNewBtnCont{
	        display:flex;
	        flex-wrap:wrap;
	        width:100%;
	    }
	    .AddNewContainer{
	        width: 100% !important;
            max-width: unset !important;
	    }
	    .FoldersGamesInnerCont.Grid .GameFolderItem{
	        width:100% !important;
	    }
	    
	    
	    .FiltersBarCont{
            justify-content: flex-start;
            align-items: flex-start;
            gap: 20px;
	        flex-direction:column;
	    }
	    .SortingPreviewCont{
	        width:100%;
	        justify-content:space-between;
	    }
	    .FilterType, .SortingPreviewCont, .SortingCont{
	        width:100%;
	    }
	    .SortingPreviewCont .SortingCont:nth-child(2){
	        display:flex;
	        justify-content:flex-end;
	    }
	    
	}

@media only screen and (min-width: 600px) and (max-width: 768px) {
    
    .FoldersGamesInnerCont.Grid .GameFolderItem{
        width:50% !important;
        width:calc(50% - 10px) !important;
    }
    
    
}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1200px) {}
















@media only screen and (max-width: 600px) {}
@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1200px) {}
	
	
	
	
	
	
	
	
	
	
	
	
	


	.ProfileFormsCont{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.ProfileFormsCont>h3{
		width: 100%;
	}
	.ProfPicDataCont{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:20px 0 25px;
	}
	.ProfPicDataCont form{
		display: flex;justify-content: center;
	}
	.MainProfPicPrev{
		width: 150px;
		height: 150px;
		-moz-border-radius:15px;
		-khtml-border-radius:15px;
		-webkit-border-radius: 15px;    
		border-radius: 15px;
		margin: 20px 0;
	}
	#TPPUploadBtn{
		display: none;
	}
	label[for="TPPUploadBtn"]{
		color: white;
		background-color: #5671ab/*#767676*/;
		padding: 14px 40px;
		cursor: pointer;
		font-weight: 500;
		font-size:13px;
		-moz-border-radius:10px;
		-khtml-border-radius:10px;
		-webkit-border-radius: 10px;    
		border-radius: 10px;
	}
	label[for="TPPUploadBtn"]:hover{
		background-color: #3c5895 /*#5e5e5e*/;
	}

	.ProfileFormsCont .HalSection{
		display: inline-flex;
		width: 50%;
		position: relative;
		padding: 10px 30px 10px 0;
		margin-top:15px;
	}


	

	.ProfileFormsCont .HalSection>span{
		pointer-events: none;
		position: absolute;
		top:0;
		left:10px;
		z-index: 2;
		background-color: white;
		font-size: 14px;
		font-weight: 500;
		padding: 0 7px;

		-webkit-transition: top 0.05s;
		-moz-transition: top 0.05s;
		-ms-transition: top 0.05s;
		-o-transition: top 0.05s;
		transition: top 0.05s;
		
	}

	.ProfileFormsCont .HalSection>input+span{
		top:20px;
		color: #737373/*#3b3b3b*/;
		font-size: 15px;
		font-weight: 500;
	}

	.ProfileFormsCont .HalSection>input:focus + span{
		top:1px;
		color: #3b3b3b/*#141414*/;
		font-size: 12px;
	}


	.ProfileFormsCont .HalSection>input:not(:placeholder-shown)+span  {
		top:1px;
		color: #3b3b3b/*#141414*/;
		font-size: 12px;

	}



	.ProfileFormsCont .HalSection>input::placeholder {
		color: white;
	}

	.ProfileFormsCont .HalSection>input:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: white;
	}

	.ProfileFormsCont .HalSection>input::-ms-input-placeholder { /* Microsoft Edge */
		color: white;
	}



	





	.ProfileFormsCont .HalSection>input{
		background-color: transparent;
		border:2px solid #dddddd;
		-moz-border-radius:8px;
		-khtml-border-radius:8px;
		-webkit-border-radius: 8px;    
		border-radius: 8px;
		padding: 10px 13px;
		width:100%;
		max-width: 350px;
		font-size: 15px;
		font-weight: 500;
	}

	.ProfileFormsCont .HalSection>input:focus{
		border:2px solid #141414;
	}











.profile-pic {
    /*color: transparent;
    transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
    
    width: 170px;
    height: 170px;
    */
    
    width: 150px;
    height: 150px;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin: 10px 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
    overflow:hidden;
}

.profile-pic input {
    display: none;
}

.MainProfPicPrev {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.25);
    border: 4px solid #d4d4d4;
    z-index: 0;
    background-color: white;
}

.profile-pic .ProfileLabel {
    cursor: pointer;
    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    background-color: #25252517;
    z-index: 10000;
    color: #fafafa;
    margin-bottom: 0;
    border:4px solid transparent;
    
    
    
}
.profile-pic:hover .ProfileLabel {
    background-color: #25252552;
}


.profile-pic .ProfileLabel img{
    /*-webkit-filter: invert(100%);
    filter: invert(100%);
    width:35px;
    height:35px;*/
    position:absolute;
    width: 36px;
    height: 36px;
    bottom:0;
    -webkit-transition: bottom 0.2s;
    -moz-transition: bottom 0.2s;
    -ms-transition: bottom 0.2s;
    -o-transition: bottom 0.2s;
    transition: bottom 0.2s;
    
    -moz-border-radius: 50%;
    -khtml-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 5px;
    background-color: #bdbdbd;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=89)";
    filter: alpha(opacity=89);
    -moz-opacity: 0.89;
    -khtml-opacity: 0.89;
    opacity: 0.89;
    
}
.profile-pic:hover .ProfileLabel img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    
    bottom:50%;
    bottom:calc(50% - 19px);
    bottom:15px;
    
}





.profile-pic span {
    display: inline-flex;
    padding: 0.2em;
    height: 2em;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    display: block;
}


progress {
    color: #263e88;
    background-color: #263e88;
    -moz-border-radius: 150px;
    -khtml-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    display: block;
    margin-top: 10px;
    width: 100%;
    height: 14px;
    max-width: 320px;
    text-align: left;
    overflow: hidden;
}

progress::-moz-progress-bar {
    background: #263e88;
}

progress::-webkit-progress-value {
    background: #263e88;
}



progress::-moz-progress-bar {
    background: #263e88;
}

progress::-webkit-progress-value {
    background: #263e88;
}

progress {
    color: #263e88;
}



progress::-webkit-progress-value {
    background-color: #263e88;
}

.AlertSuccess,
.AlertFailed {
    text-align: left;
    margin-top: 9px;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.AlertFailed {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.AlertSuccess a,
.AlertFailed a{
    color:inherit;
    text-decoration:underline;
}

.SeparatorBefore{
    position:relative;
}
.SeparatorBefore::before{
    content:"";
    display:block;
    position:relative;
    width:100%;
    height:2px;
    background-color:black;
}


@media only screen and (max-width: 600px) {
	.ProfileFormsCont .HalSection{
	    width:100%;
	    padding: 10px 0 10px 0;
	}
}

@media only screen and (min-width: 600px) {
	.ProfileFormsCont .HalSection{
	    width:50%;
	    padding: 10px 30px 10px 0;
	    margin-top:0;
	}
	
	.ProfileFormsCont .HalSection:nth-child(odd){
	    padding: 10px 10px 10px 0;
	}
	.ProfileFormsCont .HalSection:nth-child(even){
	    padding: 10px 0 10px 10px;
	}
	
	.ProfileFormsCont .HalSection:nth-child(even)>input+span{
	    left:20px;
	}
	
}

@media only screen and (min-width: 768px) {
	
}

@media only screen and (min-width: 992px) {
	
}
@media only screen and (min-width: 1200px) {
	
}







































/*************************** POP UPS *****************************************/

#AvatarsPopUp {
    top: 0;
    left: 0;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    z-index: 999999999999999999999999;
    position: fixed;
    display: flex;
    /*justify-content: center;
    align-items: center;*/
    background-color: #00000040;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -ms-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
}


#AvatarsPopUp .WhiteBgContainer {
    padding: 20px 15px;
    background-color: white;
    border-radius: 20px;
    margin:auto;
    -webkit-box-shadow: 0px 0px 55px -7px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0px 0px 55px -7px rgba(0, 0, 0, 0.50);
    box-shadow: 0 0px 55px -7px rgb(0 0 0 / 50%);
}



#AvatarsPopUp>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    border-radius: 15px;
    max-width: 440px;
    width: 90%;
}

#AvatarsPopUp>div {
    max-width: 800px;
}


#AvatarsPopUp>div>img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
}

#AvatarsPopUp>div>h1 {
    font-weight: 800;
    font-size: 18px;
    color: #191919;
    margin-bottom: 10px;
    text-shadow: unset;
}


#AvatarsPopUp>div>h2 {
    font-weight: 800;
    font-size: 28px;
    color: #191919;
}


#AvatarsPopUp>div>p {
    font-size: 14px;
    font-weight: 500;
    color: #727272;
}





.AvatarsCont {
    width: 100%;
    padding: 20px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.SingleAvatar {
    /*width:50%;max-width:120px;*/
    height: 120px;
    width: 120px;
    border: 5px solid #d6d6d6;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -khtml-border-radius: 50%;
    cursor: pointer;
}

.SingleAvatar.SelectedAvatar {
    border: 5px solid #263e8896;
}

.UploadHIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 5px dashed #d6d6d6;
    background-color: #ededed;
}

.UploadHIcon>img {
    height: 28px;
    width: 28px;
}

.UploadHIcon>p {
    margin-top: 3px;
    font-size: 13px;
}



#ExitAvatar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    max-width: unset !important;
    cursor: pointer;
}

#ExitAvatar+.WhiteBgContainer {
    position: relative;
    z-index: 9;
}



#Loading {
    top: 0;
    left: 0;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    z-index: 999999999999999999999999;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00000040;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -ms-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
}

#Loading .WhiteBgContainer {
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 55px -7px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0px 0px 55px -7px rgba(0, 0, 0, 0.50);
    box-shadow: 0 0px 55px -7px rgb(0 0 0 / 50%);
}

#Loading .WhiteBgContainer svg {
    width: 100px;
    height: 100px;
}

#Loading .WhiteBgContainer svg path {
    fill: #424242;
}
































































	/**************************************** Teachers Dashboard *************************************/
	.EmptyFolderArt{
		height: 280px;
		width: 280px;
		padding: 60px 60px 60px 30px;
		background-color: #e9e9ea;
		-moz-border-radius:50%;
		-khtml-border-radius:50%;
		-webkit-border-radius: 50%;    
		border-radius: 50%;
		overflow: hidden;
		margin:10px auto;
	}
	.EmptyFolderArt>img{		
		height: 100%;
		width: 100%;
		object-fit: contain;
	}


	.NewFolderCont{
		display: block !important;
	}
	.NewFolderCont .FullWidth{
		width: 100% !important;
		display: block !important;
		padding: 10px 0px 10px 0 !important;
	}
	.NewFolderCont>.FullWidth>input{
		max-width: unset !important;
	}

	#FolderCreationCloseBtn,.PopUpCloseBtn{
		position: absolute;
		right: 20px;
		top:20px;
		height: 45px;
		width: 45px;
		padding: 9px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
		filter: alpha(opacity=75);
		-moz-opacity: 0.75;
		-khtml-opacity: 0.75;
		opacity: 0.75;
		background-color: #eaeaea;

		-moz-border-radius:6px;
		-khtml-border-radius:6px;
		-webkit-border-radius: 6px;    
		border-radius: 6px;
		cursor: pointer;
	}
	#FolderCreationCloseBtn:hover{
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";
		filter: alpha(opacity=98);
		-moz-opacity: 0.98;
		-khtml-opacity: 0.98;
		opacity: 0.98;
	}



	.AddNewBtnCont{
	    width:100%;
	    gap:20px;
		padding-top: 20px;
		display: flex;
		justify-content: space-around;justify-content: center;
	}


	.AddNewContainer{
		cursor: pointer;
		/*width: 48%;width: 32%;*/width:50%;max-width:300px;
		border: 2px solid #dfdfdf;
		background-color: white;
		padding: 10px 15px;

		display: flex;
		align-items: center;
		justify-content: space-around;

		-moz-border-radius:10px;
		-khtml-border-radius:10px;
		-webkit-border-radius: 10px;    
		border-radius: 10px;
	}

	.AddNewContainer:hover{
		background-color: #e7e7e7;
		border: 2px solid #bfbfbf;
	}

	.AddNewContainer p{
		color: black;
	}

	.AddNewContainer .Title{
		font-weight: 700;
		font-size: 14px;
		color: #121212;
	}

	.AddNewContainer .SubTitle{
		font-weight: 500;
		font-size: 11px;
		color: #757575;
	}


	.AddNewContainer div{
		padding: 0 15px;
	}

	.FolderIcon{		
		width: 40px;
		height: 40px;
	}

	.AddNewContainer .NewBtn{
		width: 50px;
		height: 50px;
		padding: 10px;
		background-color: #dfdfdf;

		-moz-border-radius:10px;
		-khtml-border-radius:10px;
		-webkit-border-radius: 10px;    
		border-radius: 10px;
	}

	.AddNewContainer:hover .NewBtn{
		background-color: #d1d1d1;
	}









	.FiltersBarCont{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.FilterType,.SortingPreviewCont,.SortingCont{
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.SortingCont:nth-child(1){
		padding-right: 20px;
	}

	.FoldersGamesInnerCont{
		padding: 15px 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 20px;
	}


	.FoldersGamesInnerCont .GameFolderItem{
		overflow: hidden;
		position: relative;
		width: 100%;
		border:2px solid #dfdfdf;
		padding: 10px 15px;
		z-index: 2;
		color: black;


		-moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;

    display: flex;
	}

	.FoldersGamesInnerCont.Grid .GameFolderItem{
		width: 33%;
		width: calc((100% / 3) - (20px * 2)/3 );
		/*width: calc((100% / 4) - (20px * 3)/4 );*/
		flex-direction: column;
	}

	.FoldersGamesInnerCont .GameFolderItem:hover{		  
		background-color: #e7e7e7;
    border: 2px solid #bfbfbf;
	}


	.FolderItem::before,.ClassItem::before,.StudentClassItem::before,.RoomItem::before{
		content: "";
		height: 100%;
		width: 100%;
		position: absolute;
		top:0;
		left:0;
		background-image: url('../img/BG/FolderBGIcon.svg?A');
		background-size: cover;
		background-position: right 20%;
		z-index: 1;
	    
	    border-top:5px solid #3462bb;
	}
	
	
    .StudentClassItem::before,.ClassItem:before{
        background-image: url('../img/BG/ClassBGIcon.svg?A');
    }


	.GameFolderItem>img{
		width: 50px;
		height: 100%;

		object-fit: contain;
		object-position: center center;
		position: relative;
		z-index: 3;

		margin-right: 20px;
	}

	.Grid .GameFolderItem>img{
		height: 75px;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 5px;
		margin-right: 0;
	}

	.GameFolderItem>div{
		width: 100%;
	}


	.GameFolderItem > p{
		position: relative;
		z-index: 3;
	}


	.GameFolderItem .GameTitle{
		padding-top: 0;
		font-weight: 700;
		font-size: 16px;
		width:100%;text-align:left;
	}
	.Grid .GameFolderItem .GameTitle{
		padding-top: 10px;
	}
	.GameFolderItem .GameName{
		font-weight: 500;
		font-size: 14px;

		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}

	.Grid .GameFolderItem .GameName{
		flex-wrap: wrap;
	}
	.GameFolderItem .GameName>span{		
		flex-shrink: 0;
	}
	.Grid .GameFolderItem .GameName> span.GameDate, .GameFolderItem .GameName> span.GameDate{
		flex-shrink: 5;
	}




	.GameFolderItem .GameDate{
		/*padding-top: 10px;*/
		font-weight: 500;
		font-size: 13px;
		color: grey;
		text-align: right;
		width: 100%;
	}







	/*******************************New Colors for Cards' UI **************/
	    
	    
	    .FoldersGamesInnerCont .GameFolderItem{
	        border: 2px solid #dfdfdf;
	        -webkit-box-shadow: 0px  1px 6px 0px rgb(0 0 0 / 10%);
            -moz-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.10);
            box-shadow: 0px 1px 6px 0px rgb(0 0 0 / 10%);
	    }
	    .FoldersGamesInnerCont .GameFolderItem:hover{
	        border: 2px solid #bfbfbf;
	        border-color: #dfdfdf #bfbfbf #bfbfbf #bfbfbf;
	        
	        
	        -webkit-box-shadow: 0px 2px 12px 0 rgb(0 0 0 / 15%);
            -moz-box-shadow: 0px 2px 12px 0 rgba(0,0,0,0.15);
            box-shadow: 0px 2px 12px 0 rgb(0 0 0 / 15%);
	    }
	    .GameItem:before{
	        border-top:5px solid #c93c4e /*#168538 #f28531#78338c*/;
	        content: "";
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
	    }
	    .FoldersGamesInnerCont .GameFolderItem{
	        padding:12px 15px 10px;
	    }
	    
	    
	    
	    
	    .AddNewContainer .NewBtn img{
	        width:100%;
	        height:100%;
	        object-fit:contain;
	         /*-webkit-filter: brightness(4.3);
            filter: brightness(4.3);*/
	    }
	    
	    
	    .AddNewContainer .NewBtn{
	        background-color:#375ca440;
            flex-shrink:0;
	    }
	    .AddNewContainer:hover {
            background-color: #eeeeee;
	    }
	    .AddNewContainer:hover .NewBtn{
	        background-color:#2851a140;
	    }
	    .AddNewContainer .Title{
	        color:#375ca4;
	    }
	    
	    
	    
	    .AddNewContainer:nth-child(2):hover .NewBtn{
	        background-color:#c93c4e30/*#0c6e2a40*/;
	    }
	    .AddNewContainer:nth-child(2) .NewBtn{
	        background-color:#c93c4e36/*#16853840*/;
	    }
	    .AddNewContainer:nth-child(2) .Title {
            color: #c93c4e/*#168538*/;
        }
        
        
        
        .AddNewContainer:nth-child(3):hover .NewBtn{
	        background-color:#0b7d6d30; /*#65237840*/
	    }
        .AddNewContainer:nth-child(3) .NewBtn{
	        background-color:#0b7d6d36; /*#78338c40*/
	    }
        .AddNewContainer:nth-child(3) .Title {
            color: #0b7d6d; /*#78338c*/
        }
        .PollItem.GameItem:before{
	        border-top:5px solid #0b7d6d;
	    }
	    
	    
	    .FilterType .nice-select, .SortingPreviewCont .nice-select{
	        color:#375ca4;
	    }
	    
	    
	    
	    
	    
	    html, body {
            background-color: #ffffff;
        }
	    .DarkNav .Navbar {
            background-color: #ffffff;
        }
        
        .LeftNav {
		  scrollbar-color: #929292 #e3e3e3;
		}
		
		
		.FoldersQuesTitle:after {
            border-width: 0 2px 2px 0;
		}
	    .nice-select {
            background-color: transparent;
	    }
	    .nice-select.open .list{
            background-color: #ffffff;
	    }
	    
	    
	    .FoldersQuesBody{
	        font-weight:400;
	    }
	    .FoldersQuesBody:hover{
	        color:#242424;
	    }
	    
	    
	    .FoldersSingleQuesCont .FoldersQuesBody {
            color: #737171;
	    }
	    
	




















	.FilterType{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.FilterType>img,.SortingCont>img{
		height: 25px;
		width: 25px;
	}
	.FilterType>p,.SortingCont>p{
		font-weight: 500;
		font-size: 14px;
		color: #4f5054/*#33363f*/;
		display: inline-block;
		padding: 0 5px 0 3px;
	}

	.FilterType>span,.SortingCont>span{
		font-weight: 600;
		font-size: 14px;
		color: #1d1d1d;
		display: inline-block;
		padding: 0 5px 0 3px;
	}


	/****************************************** Nice Select ***********************************/
	.FilterType .nice-select,.SortingPreviewCont .nice-select{
		border:none;

		font-weight: 600;
    font-size: 14px;
    color: #1d1d1d;
    display: inline-block;
    padding: 0 5px 0 8px;
	}
	.SortingPreviewCont .nice-select{
		width: 150px;
	}


	.FilterType .nice-select:after,.SortingPreviewCont .nice-select:after{
		content:unset;
	}








	/****************************************** Nice Select ***********************************/












	.SortingCont>img.PreviewTypeBtn{
		height: 32px;
		width: 32px;
		padding: 5px;
		cursor: pointer;
		margin:0 0 0 5px;

		border-radius: 4px;
		background-color: #dfdfdf;

	}
	.SortingCont>img.PreviewTypeBtn:hover,.SortingCont>img.PreviewTypeBtn.Active{
		background-color: #cbcbcb;
	}
























		.FoldersQuesTitle{
			position: relative;
			display: block;
			cursor: pointer;
			width:100%;
			text-align: left;
			color:#464646;
			font-weight: 600;
			font-size: 14px;
			border-bottom: 1px solid #c2c2c2;
			padding:10px 0 10px 25px;
			z-index: 3;
		}
		.FoldersQuesTitle:after{
			content:"";
			position: absolute;
			left:5px;

			height: 5px;
			width: 5px;
			top:calc(50% - 7px);

			border: solid #57a0a3;
			border-width: 0 3px 3px 0;
			display: inline-block;
			
			position: absolute;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
		}

		.FoldersSingleQuesCont input[type=checkbox]:checked  ~ .FoldersQuesTitle:after {
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			
		}


		.FoldersSingleQuesCont .FoldersQuesBody{
			padding: 5px 0 5px 24px;
			color: #818181;
			font-size: 13px;
			font-weight: 500;
		}


		.FoldersSingleQuesCont .FoldersQuesBody.EmptyFolder{
			pointer-events: none;
			border-bottom: 1px solid #e9e9ea !important/*#c8c8c8*/;
			font-weight: 500;
		}

		.FoldersQuesBody {			
			padding: 5px 0 5px 5px;
			text-align: left;			
			color: #464646;
	    font-weight: 600;
	    font-size: 13px;
			position: relative;
	    display: block;
			overflow: hidden;
			/*max-height: 800px;*/
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			-moz-opacity: 1;
			-khtml-opacity: 1;
			opacity: 1;
			transform: translate(0, 0);
			margin-top: 4px;
			z-index: 2;

			transition: all 0.25s ease-in-out;			
		}

		.FoldersQuesBody:hover{
			color: #373737;
		}


		.FoldersSingleQuesCont .FoldersQuesBody:nth-last-child(1){
			border-bottom: 1px solid #c2c2c2;
		}

		.FoldersQuesCont {
			width: 100%;
			perspective: 900;
			padding: 0;
			margin: 0;
		}
		.FoldersSingleQuesCont{
		  position: relative;
		  padding: 0;
		  margin: 0;
		  padding-bottom: 4px;

		  animation: flipdown 0.5s ease both;
		}
		.FoldersSingleQuesCont:last-of-type {
		  padding-bottom: 0;
		}


		.FoldersSingleQuesCont input[type=checkbox] {
		  display: none;
		}
		.FoldersSingleQuesCont input[type=checkbox]:checked  ~ .FoldersQuesBody {
		  margin-top: 0;
		  max-height: 0;max-width: 0;
		  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		  filter: alpha(opacity=0);
		  -moz-opacity: 0;
		  -khtml-opacity: 0;
		  opacity: 0;
		  padding: 0 15px;
		  transform: translate(0, 50%);
		}

		@keyframes flipdown {
		  0% {
		    opacity: 0;
		    transform-origin: top center;
		    transform: rotateX(-90deg);
		  }
		  5% {
		    opacity: 1;
		  }
		  80% {
		    transform: rotateX(8deg);
		  }
		  83% {
		    transform: rotateX(6deg);
		  }
		  92% {
		    transform: rotateX(-3deg);
		  }
		  100% {
		    transform-origin: top center;
		    transform: rotateX(0deg);
		  }
		}








		.LeftNav {
		  scrollbar-width: auto;
		  scrollbar-color: #4d4d4d lightgrey;
		}
		.LeftNav::-webkit-scrollbar {
		  width: 14px;
		}
		.LeftNav::-webkit-scrollbar-track {
		  background: #d8d8d8;
		  -moz-border-radius:30px;
			-khtml-border-radius:30px;
			-webkit-border-radius: 30px;    
			border-radius: 30px;
		}
		.LeftNav::-webkit-scrollbar-thumb {
		  background-color: #919191/*#818181*/;
		  -moz-border-radius:10px;
			-khtml-border-radius:10px;
			-webkit-border-radius: 10px;    
			border-radius: 10px;
		  border: 2px solid #d8d8d8;/*lightgrey;*/
		}










	
		
/********************* About Page **************************************************/

.AboutPage{
	padding-left: 0;
	padding-right: 0;
	padding-top:90px;

	width: 100%;
	max-width: 100%;
}


.PageUpperCover{
	height: 300px;
	width: 95%;
	width: calc(100% - 40px);
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 50px;


	overflow:hidden;
	-moz-border-radius:15px;
	-khtml-border-radius:15px;
	-webkit-border-radius: 15px;    
	border-radius: 15px;

}
.AboutCover{
	background-image: url("../img/BG/AboutCover.jpg");
	background-size: cover;position: relative;
	background-position: center 20%;
}

.BlueOverlay:before{
	content: "";
	position: absolute;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	background-color: #1f2e4f /*#1f2e4f*/;
	background-image: url("../img/BG/PatternBG.png");
	background-size: cover;
	background-position: center 10%;
	z-index: 1;




  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.80;
  -khtml-opacity: 0.80;
  opacity: 0.80;


}

.AboutCover h1{
	position: relative;
	z-index: 2;
	color: white;
}




.AboutInterSection{
	margin-top: -50px;
	position: relative;
	z-index: 3;
	width: 80%;
	max-height: 250px /*330px*/;
	background-color: white;


	-moz-border-radius:15px;
	-khtml-border-radius:15px;
	-webkit-border-radius: 15px;    
	border-radius: 15px;

	overflow: hidden;

	display: flex;
	justify-content: center;
	/*align-items: center;*/


  -webkit-box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
  -moz-box-shadow: 0px 0px 63px -5px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
}


.AboutInterSection img{
	/*margin:auto 0;*/
	position: relative;
	top:0;left:0;
	width: 50%;
	object-fit: cover;
	object-position: 25% 20%;
}


.AboutInterSection p{
	margin:auto 0;
	padding: 30px;
	font-weight: 500;
	width: 50%;
}



.WhyChooseUsCont{
	margin-top:110px;
	width: 100%;
	display: flex;
	overflow: hidden;
}

.WhyChooseUsCont > img{
	width: 35%;

	object-fit: cover;
	object-fit: center center;

}


.WhyChooseUsCont h2{
	width: 100%;
	text-align: center;
	padding:30px 10px;
}


.ChooseUsReasonsCont{
	padding: 20px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.ChooseUsReason{
	width: 50%;
	padding: 15px;

	display: flex;

}

.ChooseUsReason img{
	width: 50px;
	height: 50px;
	margin: 0 10px 0 0;
}





/***************************** In Game Menus Styles **************************************/
.MessageTitle {
    display: flex;
    background-color: #284C9D /*#1a848d#3e86b0*/;
    width: 100%;

    /*justify-content: center;*/
    align-items: center;
}

.MessageDivContent {
    width: 100%;
    background-color: #14567c;
    background-color: #084d59;
    /*
background-color: #15353B;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%230B1C20'/%3E%3Cstop offset='1' stop-color='%2315353B'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%2310292e'/%3E%3Cstop offset='1' stop-color='%2315353B'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
*/
    background-color: #112041;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23080E1D'/%3E%3Cstop offset='1' stop-color='%23112041'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%230d172f'/%3E%3Cstop offset='1' stop-color='%23112041'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    border-radius: 0 0 10px 10px;
    padding: 20px;
}

.MessageDivContent>img{
	height: 160px;
	width: 160px;
	object-fit: contain;
}

.MessageDivContent p {
    font-size: 25px;
    color: white;
    padding: 15px 0;
}

#WheelQuestion {
    font-weight: bold;
    font-size: 25px;
    padding: 20px 0;
}

.closeBtn{
	padding: 8px;
	z-index: 162;
	cursor: pointer;
	height: 34px;
	width: 34px;
}
#GameTitle {
    font-size: 26px;
    font-weight: 800;
}
.GameName {
    font-size: 20px;
    font-weight: 500;
}
































































































/*************************************** Game Creator *************************************/
/**Context Menu **/

.ActiveDuetoContext{
    background-color:#e7e7e7;
    border:2px solid #bfbfbf;
}
/*.RightMainPage,.FoldersGamesInnerCont{
    position:relative;
}*/
#ContextMenu{
    visibility: hidden;
    position: fixed;
    width: 250px;top:0;left:0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
    z-index:99999999999999999;
    
    -webkit-box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
    -moz-box-shadow: 0px 0px 63px -5px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
}
#ContextMenu .menu{
    padding: 5px 5px 9px;
}
#ContextMenu .item{
    list-style: none;
    font-size: 16px;
    font-weight: 500;
    display: flex; align-items:center;
    width: 100%;
    cursor: pointer;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 2px;
    padding: 10px 5px 10px 10px;
}
#ContextMenu .item:hover{
    /*background: #f2f2f2;*/
    background-color:#e2e2e2/*#ebebeb*/;
}
#ContextMenu .item span{
    margin-left: 10px;
    font-size: 15px;
}
.ContextIcon{
    width:25px;
    height:25px;
}
#ContextMenu .setting{
    display: flex;
    margin-top: -5px;
    padding: 6px 5px 5px;
    border-top: 1px solid #ccc;
}
#ContextMenu .MegaMenu{
    position: relative;
    justify-content: space-between;
}
.MegaMenu .MegaMenu-menu{
    position: absolute;
    background: #fff;
    width: 200px;
    right: -200px;
    top: -35px;
    padding: 13px;
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.08);
    transition: 0.2s ease;
}
.MegaMenu:hover .MegaMenu-menu{
    opacity: 1;
    pointer-events: auto;
}



/**Rename & Delete Games/Folders **/
.PopUpTitle{
    font-size:22px;
    font-weight:700;
    padding: 0 45px 15px 0;
}
#RenameItemCont .ProfileFormsCont .HalSection{
    margin-top:0;
    padding: 5px 0px 10px 0 !important
}
#DeleteItemCont .PopUpTitle{
    padding: 0 45px 30px 0;
}













/**Right Panel **/
#RightPanel{
    position:absolute;
    z-index:99999;
    padding:10px 20px 20px;
    /*top:50%;
    top:calc(50% - 200px);*/
    right:-340px;
    width:320px;
    height:100%;height:calc(100% - 10px);
    background-color:white;
    
    overflow-y:auto;
    
    
    -moz-border-radius:10px 0 0 10px;
	-khtml-border-radius:10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;    
	border-radius: 10px 0 0 10px;
	
	-webkit-box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
    -moz-box-shadow: 0px 0px 63px -5px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
    
    
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    -ms-transition: right 0.3s;
    -o-transition: right 0.3s;
    transition: right 0.3s;
}

#RightPanel.Opened{
    right:0px;
}


#RightPanel>p{
    font-size:18px;
    font-weight:700;
    color:#6a6b70;
    text-align:center;
    padding: 10px 3px;
}






.CloseBtn {
    cursor:pointer;
    z-index:999;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 34px;
    height: 34px;
    background-color:#c4c4c4;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;

    
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    
}
.CloseBtn:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.CloseBtn:before, .CloseBtn:after {
    position: absolute;
    left: 15px;
    top:7px;
    content:'';
    height: 20px;
    width: 3px;
    background-color: #333;
    
    -khtml-border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.CloseBtn:before {
  transform: rotate(45deg);
}
.CloseBtn:after {
  transform: rotate(-45deg);
}









.RightPanelDirec{
    position:absolute;
    left:-30px;
    top:50%;top:calc(50% - 50px);
    width:30px;
    height:100px;
    background-color:#b5b5b5;
    display:flex;justify-content:center;
    align-items:center;
    
    -moz-border-radius:20px 0 0 20px;
	-khtml-border-radius:20px 0 0 20px;
	-webkit-border-radius: 20px 0 0 20px;    
	border-radius: 20px 0 0 20px;
	
	-webkit-box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
    -moz-box-shadow: 0px 0px 63px -5px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 63px -5px rgb(0 0 0 / 23%);
}

.QuesTypeCont{
    width:100%;
    display:flex;
    gap:5px;
    padding:3px 5px 5px;
}
.RightPanelInputsCont label{
    display:inline-block;
    margin-bottom:5px;
    font-size:14px;font-weight:600;
}
.RightPanelInputsCont input,.RightPanelInputsCont textarea{
    margin-bottom:5px;
    width:100%;
    font-weight:500;
    display:block;
    border:2px solid #e0e0e0;
    padding:8px 10px;
    font-size:14px;
    -moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius: 5px;    
	border-radius: 5px;
}
.RightPanelInputsCont input{
    padding:8px 40px 8px 10px;
}

#MainQuestionInput,#TitleOnGameInput{
    padding:8px 10px;
}
.RightPanelInputsCont input:focus,.RightPanelInputsCont textarea:focus{
    border:2px solid #727272;
}

.QuesType{
    width:33%;
    border:2px solid transparent;
    -moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;
	display:inline-flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:5px 10px;
	cursor:pointer;
}
.QuesType:hover,.QuesType.Active{
    border:2px solid #d7d7d7;
}
.QuesType.Active{
    pointer-events:none;
}

.QuesType img{
    width:70%;
    object-fit:contain;
}
.QuesType p{
    font-size:12px;
    font-weight:500;
    text-align:center;
    line-height: 15px;
}



.CorrectAnswer {
    cursor:pointer;
    position: absolute;
    background-color:#eaeaea/*transparent*/;
    border:3px solid #d7d7d7/*#e0e0e0*/;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    right:30px;
    margin-top:-38px;
}

.ActiveCorrectAns{
    background-color: #55a146;
    border:3px solid #55a146;
}

.CorrectAnswer.ActiveCorrectAns::before {
    content:"";
    position: absolute;
    transform: rotate(45deg) translate(-50%, -50%);
    left: 18.45%;
    top: 50%;
    height: 11px;
    width: 4px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
}











/*** Number of fields **/
#NumberOfFiledsCont .WhiteMenuCont{
        padding:0 25px 85px;
        position:relative;
    }
    .PopUpSelTitle{
        font-size:20px;font-weight:700;
        background-color:white;
        position:sticky;top:0;
        padding:25px 0 15px 0;
    }
    #AllFieldsCont{
        display:flex;gap:15px;justify-content:flex-start;flex-wrap:wrap;
    }
    .FieldsNumb{
        cursor:pointer;
        width:67px;height:67px;
        display:inline-flex;justify-content:center;align-items:center;
        font-size:20px;
        font-weight:bold;
        border:2px solid #e1e1e1;
        
        -moz-border-radius:10px;
    	-khtml-border-radius:10px;
    	-webkit-border-radius: 10px;    
    	border-radius: 10px;
    }
    .FieldsNumb:hover{
        color:white;
        background-color:#284d9e;
        border:2px solid #284d9e;
    }
    
    
    .CloseCont{
        background-color:white;
        position:absolute;
        bottom:0px;right:0;
        padding:17px 0;
    }
    
    


/*** Content */
.ContentHeader,.ContentInputsCont{
	width: 100%;
	display: flex;
	margin-bottom: 10px;
	gap:10px;
	position:relative;
}
.ContentHeader>span{
	width: 50%;
	text-align: center;
	color: white;
}
.ContentInputsCont>input{
	margin:auto;
	width: 50%;
	padding: 8px 10px;

	outline: none;
	border:none;
	background-color: #e8e8e9;

	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius: 5px;    
	border-radius: 5px;
}


.EditCardsContenInput,.EditWordsSearchContenInput,.EditCrosswordsContenInput,.EditTrueOrFalseContenInput,.EditTwoTeamsContenInput{
    position:absolute;right:47px;top:5px;top:calc(50% - 18px);
    
    width: 36px;
	height: 36px;
	background-color: lightgrey;
	padding:6px;

	-moz-border-radius:3px;
	-khtml-border-radius:3px;
	-webkit-border-radius: 3px;    
	border-radius: 3px;

	cursor: pointer;
    
}


.DeleteContent,.DeleteCardsContenInput,.DeleteWordsSearchContenInput,.DeleteCrosswordsContenInput,.DeleteTrueOrFalseContenInput,.DeleteTwoTeamsContenInput{
    position:absolute;right:5px;top:5px;top:calc(50% - 18px);
	width: 36px;
	height: 36px;
	background-color: lightgrey;
	padding:6px;

	-moz-border-radius:3px;
	-khtml-border-radius:3px;
	-webkit-border-radius: 3px;    
	border-radius: 3px;

	cursor: pointer;
}

.InputFramePrev{
    width:100%;
    padding:10px 53px 10px 10px;
    
    background-color:#5454541f;
    
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ContentInputsCont:nth-child(even) .InputFramePrev{
    background-color:#d5d5d51f;
}

#AddnewBtnCont{
    padding:10px 0;
}







/** Theme **/
.ActiveThemeCont,.ThemeCont:hover{
    background-color: #ffffff1c;
}
.ThemeCont{
	display: inline-flex;
	width: 50%;
	width: calc(50% - 8px);
    margin-right: 4px;
    margin-bottom: 4px;
    
	flex-direction: column;

	justify-content: center;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	
	-moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.ThemeCont>img{
	width: 100%;
	overflow: hidden;

	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius: 5px;    
	border-radius: 5px;
}
.ThemeCont>span{
	width: 100%;
	text-align: center;
	color: white;
	padding: 10px 10px 0;
	font-size: 14px;

}






.InputsContainerMenus hr{
	margin:8px 0;
	width: 100%;
}



.InputsContainerMenus p{
	color: white;
}
.InputsContainerMenus input,.InputsContainerMenus select{
	width: 100%;
	width: calc(100% - 10px);
	padding: 8px 10px;

	outline: none;
	border:none;
	background-color: #e8e8e9;

	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius: 5px;    
	border-radius: 5px;
}












.FullScreen.GameCreator{
	padding-top: 90px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	width:100%;
	overflow-x:hidden;
}


.GameCreatorNav{
	display: inline-flex;
	flex-shrink: 0;
	margin-left: 10px;
	min-width: 100px;
	height: 100%;
	height: calc(100vh - 100px);



	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;



	background-color: lightgray;	
}

.GameControls{
	position: relative;
	z-index: 3;
	width: 90px;
	padding: 10px 0 10px 7px;

	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;
	overflow: hidden;

	

	/*display: inline-flex;*/
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;

	height: 100%;
	overflow-y: auto;

}

.GameControls {
  scrollbar-width: auto;
  scrollbar-color: #4d4d4d lightgrey;
}
.GameControls::-webkit-scrollbar {
  width: 14px;
}
.GameControls::-webkit-scrollbar-track {
  background: gainsboro;
}
.GameControls::-webkit-scrollbar-thumb {
  background-color: #363636/*#1f2e4f*/;
  border-radius: 10px;
  border: 2px solid lightgrey;
}





.SingleControl{
	cursor: pointer;
	/*height: 80px;*/
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	margin-bottom: 8px;
	/*border-bottom: 1px solid grey;*/

	padding:6px 4px;

	-moz-border-radius:6px 0 0 6px;
	-khtml-border-radius:6px 0 0 6px;
	-webkit-border-radius: 6px 0 0 6px;    
	border-radius: 6px 0 0 6px;
}
.SingleControl:hover,.SingleControl.ActiveSection{
	background-color: #363636/*1f2e4f*/;
}
.SingleControl.ActiveSection{
	pointer-events: none;
}
.SingleControl:hover{
	background-color: #36363690/*#1f2e4f90*/;
}

.SingleControl:hover >img,.SingleControl.ActiveSection >img{
	-webkit-filter: invert(1);
	filter: invert(1);
}

.SingleControl:hover >p,.SingleControl.ActiveSection >p{
	color: #ccc9c0;
}



.SingleControl>img{
	width: 35px;
	height: 35px;
}

.SingleControl>p{
	font-weight: 500;
	font-size: 14px;
	color: #33363f;
}



.GameDetails{
	padding: 10px 10px 10px 20px;
	display: inline-block;
	width: 350px;
	/*height: 100%;*/
	background-color: #363636/*#1f2e4f*/;


	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;

	height: 100%;
	overflow-y: auto;

}

.GameDetails {
  scrollbar-width: auto;
  scrollbar-color: #363636 lightgrey;
}
.GameDetails::-webkit-scrollbar {
  width: 14px;
}
.GameDetails::-webkit-scrollbar-track {
  background: gainsboro;
}
.GameDetails::-webkit-scrollbar-thumb {
  background-color: #363636/*#1f2e4f*/;
  border-radius: 10px;
  border: 2px solid lightgrey;
}






.GamePreview{
	width: 100%;
	/*height: 100vh;*/
	padding: 0 10px 10px;
	position:relative;

	
}

.GameSimulation{
	width: 100%;
	height: 100%;height: calc(100vh - 100px);
	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;
	background-color: lightgrey /*red*/;
	overflow: hidden;



	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}



#ContentTitle{
	font-weight: 600;
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: white;
	border-bottom: 1px solid #ffffff1f;
}

.InputsContainerMenus{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.InputsContainerMenus > .SingleGameContainer.ComingSoonGame{
    pointer-events:none !important;
    position:relative;
}
.InputsContainerMenus > .SingleGameContainer.ComingSoonGame:after{
    content: "Coming Soon";
    position: absolute;
    font-weight: 500;
    color: #dedede;
    background-color: #288f9d7d/*#284c9dcc*/;
    padding: 3px 9px;
    font-size: 12px;
    -moz-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-border-radius: 6px;    
	border-radius: 6px;
    top: 50%;top: calc(50% - 10px);top: 22px;
    
    -webkit-box-shadow: 0px 0px 6px -5px rgb(0 0 0 / 80%);
    -moz-box-shadow: 0px 0px 6px -5px rgba(0,0,0,0.80);
    box-shadow: 0px 0px 6px -5px rgb(0 0 0 / 80%);
}
.InputsContainerMenus > .SingleGameContainer.ComingSoonGame>img,.InputsContainerMenus > .SingleGameContainer.ComingSoonGame>p{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}
.InputsContainerMenus > .SingleGameContainer{
	width: 50%;
	width: calc(50% - 8px);
	margin-right: 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	margin-bottom: 6px;

	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;
}


.InputsContainerMenus > .SingleGameContainer:hover{
	background-color: #ffffff1c;

}

.InputsContainerMenus > .SingleGameContainer.ActiveGame{
	background-color: #ffffff1c;
}


.InputsContainerMenus > .SingleGameContainer>img{
	width: 45px;
	height: 45px;

	-webkit-filter: invert(1);
	filter: invert(1);
	margin-bottom: 10px;
}

.InputsContainerMenus > .SingleGameContainer>p{
	color: white;
	font-size: 15px;
	width:100%;
	text-align:center;
}

.InputsContainerMenus > .SingleGameContainer>span{
	color: white;
	font-size: 10px;
	align-self: flex-end;
	background-color:#186284;
	padding:4px 8px;
	margin-top:3px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius: 5px;    
	border-radius: 5px;
}








.GamePreviewImages{
	width: 100%;
	height: 100%;
	/*height: calc(100vh - 100px);*/
	position: relative;
	background-size:cover;
	background-position:center center;
}


/** Wheel Image Start **/

#StaticWheel,#StaticWheel2,#DynamicWheel{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

#StaticWheel{
	z-index: 10;
}

#StaticWheel2 {
	-webkit-filter: drop-shadow( 0px 0px 25px rgba(0, 0, 0, .08));
  filter: drop-shadow( 0px 0px 25px rgba(0, 0, 0, .08));
  z-index: 9;
}
#DynamicWheel foreignObject{
	pointer-events: auto;
}




#StaticWheel2 .Circle1{
	fill:#C3E2E5;
}
#StaticWheel2 .Circle2{
	fill:#AFD7DA;
}

/* Main Wheel Color*/
#StaticWheel2 .Circle3{
	fill:#153377;
}
#StaticWheel2 .Circle4{
	fill:#9ECDD1;
}


#DynamicWheel .WheelText {	
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 500;
    font-size: 18px;
    pointer-events: auto;
    background-color: transparent;
    border:none;
    outline: none;
    text-align: center;



    white-space: nowrap;
}


#DynamicWheel foreignObject{
	overflow: hidden;
}

#DynamicWheel foreignObject:nth-child(even) .WheelText {
    /*fill: #298A91;*/
    color: #111111/*#163b3e  #298A91*/;
}

#DynamicWheel path:nth-child(even){
	fill:#C3E2E5;
}
#DynamicWheel path:nth-child(odd){
	fill:#284c9d/*#68B8C1*/;
}
#DynamicWheel.Theme2 path:nth-child(odd){
	fill:#25466d/*#68B8C1*/;
}



.WheelText::-webkit-input-placeholder {
	color: #dedede;
}
.WheelText::-moz-placeholder {
	color: #dedede;
}
.WheelText:-ms-input-placeholder {
	color: #dedede;
}
.WheelText:-moz-placeholder {
	color: #dedede;
}
.WheelText::placeholder {
	color: #dedede;
}

#DynamicWheel foreignObject:nth-child(even) .WheelText::-webkit-input-placeholder {
	color: #1c1c1c;
}
#DynamicWheel foreignObject:nth-child(even) .WheelText::-moz-placeholder {
	color: #1c1c1c;
}
#DynamicWheel foreignObject:nth-child(even) .WheelText:-ms-input-placeholder {
	color: #1c1c1c;
}
#DynamicWheel foreignObject:nth-child(even) .WheelText:-moz-placeholder {
	color: #1c1c1c;
}
#DynamicWheel foreignObject:nth-child(even) .WheelText::placeholder {
	color: #1c1c1c;
}







.Wheel12{
	padding: 20px;
}
.Wheel12 foreignobject{
	position:relative;
	top:0;left:0;
}
.Wheel12 .WheelText{
	position: relative;
	top:0;left:0;
	writing-mode: vertical-rl;text-orientation: mixed;
}
.Wheel12#DynamicWheel path:nth-child(odd){
	fill:#396ca5;
}
.Wheel12#DynamicWheel foreignObject:nth-child(even) .WheelText{
	color:#132941/*#396ca5*/;
}

.Theme1C10 foreignObject p{
    line-height:150px;
}
.Theme1C12 foreignObject p{
    line-height:129px;
}
.Theme1C14 foreignObject p{
    line-height:101px;
}
.Theme1C16 foreignObject p{
    line-height:84px;
}
.Theme1C18 foreignObject p{
    line-height:72px;
}



.Wheel12.Theme2 .WheelText{
    padding:6px 0 !important;
    writing-mode: unset;
}

.WheelBGImgTh1 {
    background-image: url('../img/GameThemes/Wheel/BGs/WheelBG1.webp');
}
.WheelBGImgTh2{
    background-image: url('../img/GameThemes/Wheel/BGs/WheelBG2.webp');
}
.WheelBGImgTh3{
    background-image: url('../img/GameThemes/Wheel/BGs/WheelBG3.webp');
}
.WheelBGImgTh4{
    background-image: url('../img/GameThemes/Wheel/BGs/WheelBG4.webp');
}
.WheelBGImgTh4 svg.Wheel12,.WheelBGImgTh4 img.Wheel12{
    padding:80px;
    height: 180% !important;
    width: 180% !important;
    left: -40%;
}

/*.WheelBGImgTh4 .Wheel12#DynamicWheel path:nth-child(odd) {
    background: rgb(255,64,113);
    background: -moz-radial-gradient(circle, rgba(255,64,113,1) 0%, rgba(153,15,50,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(255,64,113,1) 0%, rgba(153,15,50,1) 100%);
    background: radial-gradient(circle, rgba(255,64,113,1) 0%, rgba(153,15,50,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff4071",endColorstr="#990f32",GradientType=1);
}*/

/** Wheel Image End **/





/** LiveBoardGame Image Start **/
#LiveBoardGamePreview{
    background-size:cover;
    background-position:center center;
}
.LiveBoardGameBGImgTh1 {
    background-image: url('../img/GameThemes/LiveBoardGame/BGs/LiveBoardGame1.webp');
}
.LiveBoardGameBGImgTh2{
    background-image: url('../img/GameThemes/LiveBoardGame/BGs/LiveBoardGame2.webp');
}
.LiveBoardGameBGImgTh3{
    background-image: url('../img/GameThemes/LiveBoardGame/BGs/LiveBoardGame3.webp');
}
.LiveBoardGameBGImgTh4{
    background-image: url('../img/GameThemes/LiveBoardGame/BGs/LiveBoardGame4.webp');
}







#Live3DBoardGamePreview{
    background-size:cover;
    background-position:center center;
}
.Live3DBoardGameBGImgTh1 {
    background-image: url('../img/GameThemes/Live3DBoardGame/BGs/Live3DBoardGame1.webp');
}

/** LiveBoardGame Image End **/



#XOPreview{
    background-size:cover;
    background-position:center center;
}
.XOBGImgTh1 {
    background-image: url('../img/GameThemes/XO/BGs/XO1.webp');
}
.XOBGImgTh2{
    background-image: url('../img/GameThemes/XO/BGs/XO2.webp');
}
.XOBGImgTh3{
    background-image: url('../img/GameThemes/XO/BGs/XO3.webp');
}
.XOBGImgTh4{
    background-image: url('../img/GameThemes/XO/BGs/XO4.webp');
}









#BingoPreview{
    background-size:cover;
    background-position:center center;
}
.BingoBGImgTh1 {
    background-image: url('../img/GameThemes/Bingo/BGs/Bingo1.webp');
}













/** Cards Images Start **/

#CardsPreview{
	width: 100%;
	height: 100%;
	max-height: calc(100vh - 90px);
	position: relative;
	display: flex;

	position: relative;
}


#CardsPreview .CardHolder{
	margin:auto;
	position: relative;
	width: 80%;
	/*width: calc(80% - 40px);
	height: 0;
	max-height: 100%;
	padding-top: 56.25%;
	aspect-ratio: 9 / 16;
	margin:auto;*/

	width: 100%;
	height: 100%;
	background-size:cover;
	background-position:center center;
	
	
	background-image: url('../img/GameThemes/Cards/BGs/CardsBG1.webp');
    

/*
	top:50%;
	left:50%;
	-webkit-transform: translatex(-50%) translatey(-50%);
	-moz-transform: translatex(-50%) translatey(-50%);
	-o-transform: translatex(-50%) translatey(-50%);
	-ms-transform: translatex(-50%) translatey(-50%);
	transform: translatex(-50%) translatey(-50%);
*/



}

#CardsPreview .CardImage{
	position: absolute;
	top:10px;
	left:10px;
	/*width: 100%;
	height: 100%;

	width: calc(100% - 40px);
	height: calc(100% - 40px);*/
	top:calc(10% + 10px);
	left:calc(10% + 10px);
	width: calc(80% - 40px);
	height: calc(80% - 40px);
	
	background-size:cover;
	background-position:center center;
	object-fit:cover;
	object-position:center center;
	background-image: url('../img/GameThemes/Cards/CardsFront1.webp');


	z-index: 3;


	-webkit-box-shadow: 0px 0px 25px -5px rgb(0 0 0 / 23%);
  -moz-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 25px -5px rgb(0 0 0 / 23%);


  -moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;
	overflow: hidden;
}
#CardsPreview .CardImage img{
    width: 100%;
	height: 100%;
	object-fit:cover;
	object-position:center center;
}

#CardsPreview .CardImage:nth-child(2){
	top:20px;
	left:20px;
	z-index: 2;
	
	top:calc(10% + 20px);
	left:calc(10% + 20px);
}

#CardsPreview .CardImage:nth-child(3){
	top:30px;
	left:30px;
	z-index: 1;
	
	top:calc(10% + 30px);
	left:calc(10% + 30px);
}


#CardsPreview.Theme1 .CardHolder{
	background-image: url('../img/GameThemes/Cards/BGs/CardsBG1.webp');
}
#CardsPreview.Theme2 .CardHolder{
	background-image: url('../img/GameThemes/Cards/BGs/CardsBG2.webp');
}
#CardsPreview.Theme3 .CardHolder{
	background-image: url('../img/GameThemes/Cards/BGs/CardsBG3.webp');
}
#CardsPreview.Theme1 .CardHolder .CardImage{
    background-image: url('../img/GameThemes/Cards/CardsFront1.webp');
}
#CardsPreview.Theme2 .CardHolder .CardImage{
    background-image: url('../img/GameThemes/Cards/CardsFront2.webp');
}
#CardsPreview.Theme3 .CardHolder .CardImage{
    background-image: url('../img/GameThemes/Cards/CardsFront3.webp');
}
#CardsPreview.Theme1 .CardHolder .CardsText,#CardsPreview.Theme1 .CardHolder .CardsText>span{
	color: gainsboro;
    
}
#CardsPreview.Theme2 .CardHolder .CardsText,#CardsPreview.Theme2 .CardHolder .CardsText>span{
	color: #303030;
    
}
#CardsPreview.Theme3 .CardHolder .CardsText,#CardsPreview.Theme3 .CardHolder .CardsText>span{
	color: #164268;
    
}


div.CardImage{
	display: flex;
}
div.CardImage img{
	position: absolute;
	width: 100%;
	height: 100%;

	width: auto;
  height: auto;
  object-fit: cover;
  object-position: center center;
}

.CardsText{
	position: relative;
	z-index: 5;
	margin:auto;
	color: white;
	font-weight: 600;
	font-size:22px;
	margin:auto;
	width: 80%;
	width: calc(100% - 40px);
	height: 80%;
	text-align: center;

	background-color: transparent;
	outline: none;
	border: none;


	resize: none;
	
	
	word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
	
    
    scrollbar-width: auto;
    scrollbar-color: #4d4d4d lightgrey;
}
.CardsText::-webkit-scrollbar {
  width: 14px;
}
.CardsText::-webkit-scrollbar-track {
  background: #d8d8d890;
  -moz-border-radius:30px;
	-khtml-border-radius:30px;
	-webkit-border-radius: 30px;    
	border-radius: 30px;
}
.CardsText::-webkit-scrollbar-thumb {
  background-color: #919191/*#818181*/;
  -moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;    
	border-radius: 10px;
  border: 2px solid #d8d8d890;/*lightgrey;*/
}


.CardsText>span{
	color: gainsboro;
	
	width:100%;
	height:100%;
	display:inline-block;
	
	word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
/** Cards Images End **/







/** WordsSearch Preview Start **/

.WordSearchContainer{
	padding: 30px 10px 10px 30px;
	position: relative;
	height: 100%;
	height: calc(100vh - 100px);
	width: calc(100vh - 100px);
  overflow: hidden;

	z-index: 6;

	flex-grow: 0;


	left:50%;
	-webkit-transform: translatex(-50%);
	-moz-transform: translatex(-50%);
	-o-transform: translatex(-50%);
	-ms-transform: translatex(-50%);
	transform: translatex(-50%);
}

.WordSearchContainer>div{
	position: relative;
	height: 11.111%;
	height: calc( 100% / 9);
	width: 100%;
	background-color: #cecece;	
	z-index: 8;
}





/* Label */
.WordSearchContainer>div:nth-child(1){
	position: absolute;
	/*height: 11.111%;
	height: calc( 100% / 9);*/
	height: 20px;
	width: 100%;
	width: calc(100% - 40px);
	background-color: transparent;	
	z-index: 8;
	top:10px;
	font-size: 12px;
}
.WordSearchContainer>div:nth-child(1)>span{
	background-color: transparent;
	border:none;
}


/* Label */
.WordSearchContainer>div>p{
	position: absolute;
	height: 100%;
	display: flex;
	align-items: center;
	width: 10px;
	vertical-align: middle;
	background-color: transparent;	
	z-index: 8;
	left: -20px;
	font-size: 12px;


}







.WordSearchContainer>div:nth-child(2)>span:nth-child(2),.WordSearchContainer>div:nth-child(2)>input:nth-child(2){
	-moz-border-radius:5px 0 0 0;
	-khtml-border-radius:5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;    
	border-radius: 5px 0 0 0;
}
.WordSearchContainer>div:nth-child(2)>span:nth-child(10),.WordSearchContainer>div:nth-child(2)>input:nth-child(10){
	-moz-border-radius:0 5px 0 0;
	-khtml-border-radius:0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;    
	border-radius: 0 5px 0 0;
}





.WordSearchContainer>div:nth-child(10)>span:nth-child(2),.WordSearchContainer>div:nth-child(10)>input:nth-child(2){
	-moz-border-radius:0 0 0 5px;
	-khtml-border-radius:0 0 0 5px;
	-webkit-border-radius: 0 0 0 5px;    
	border-radius: 0 0 0 5px;
}
.WordSearchContainer>div:nth-child(10)>span:nth-child(10),.WordSearchContainer>div:nth-child(10)>input:nth-child(10){
	-moz-border-radius:0 0 5px 0;
	-khtml-border-radius:0 0 5px 0;
	-webkit-border-radius: 0 0 5px 0;    
	border-radius: 0 0 5px 0;
}




















.WordSearchContainer>div>span,.WordSearchContainer>div>input{
	position: relative;
	width: 11.111%;
	width: calc( (100% / 9) - 4px);
	height: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border:1px solid grey;
	outline: none;
	text-align: center;

	background-color: #eceff4;

}


/** WordsSearch Preview End **/





/** BoardGame Preview Start **/
.BoardGameContainer{
	height: 100%;
	width: 100%;
	position: relative;
	padding: 20px;
}

.BoardGameContainer svg{
	width: 100%;
	height: 100%;

}

.BoardGameArrows{
	fill: #1f2e4f;
}

.BoardGameContainer foreignObject{
	-webkit-box-shadow: 0px 0px 25px -5px rgb(0 0 0 / 23%);
  -moz-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 25px -5px rgb(0 0 0 / 23%);
}

.BoardGameText,.BoardGameProText{
	position: relative;
	z-index: 9;
	color: white;
	height: 100%;
	width: 100%;
	padding: 5px;
	font-weight: 500;
	font-size: 23px;
	
	overflow: hidden;
	outline: none;
	border: none;


	/*hyphens: auto;*/
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap;

}


.BoardGameTextFaded{
	position: relative;
	z-index: 9;
	color: white;
	height: 100%;
	width: 100%;
	padding: 15px;
	font-weight: 500;
	font-size: 23px;
	
	
	overflow: hidden;
	outline: none;
	border: none;
	background-color: #284c9d60;
  color: white;
}


input.BoardGameText{
	text-align: center;
}





.BoardGameContainer foreignObject:nth-child(odd) .BoardGameText,.BoardGameContainer foreignObject:nth-child(odd) .BoardGameProText{
	background-color: #284c9d;
	color: white;
}

.BoardGameContainer foreignObject:nth-child(even) .BoardGameText,.BoardGameContainer foreignObject:nth-child(even) .BoardGameProText{
	background-color: white;
	color: #071430;
}





/*
.BoardGameText::-webkit-input-placeholder,.BoardGameProText::-webkit-input-placeholder {
	color: #2f2f2f;
}
.BoardGameText::-moz-placeholder,.BoardGameProText::-moz-placeholder {
	color: #2f2f2f;
}
.BoardGameText:-ms-input-placeholder,.BoardGameProText:-ms-input-placeholder {
	color: #2f2f2f;
}
.BoardGameText:-moz-placeholder,.BoardGameProText:-moz-placeholder {
	color: #2f2f2f;
}
.BoardGameText::placeholder,.BoardGameProText::placeholder {
	color: #2f2f2f;
}

.BoardGameContainer foreignObject:nth-child(odd) .BoardGameText::-webkit-input-placeholder {
	color: white;
}
.BoardGameContainer foreignObject:nth-child(odd) .BoardGameText::-moz-placeholder {
	color: white;
}
.BoardGameContainer foreignObject:nth-child(odd) .BoardGameText:-ms-input-placeholder {
	color: white;
}
.BoardGameContainer foreignObject:nth-child(odd) .BoardGameText:-moz-placeholder {
	color: white;
}
.BoardGameContainer foreignObject:nth-child(odd) .BoardGameText::placeholder {
	color: white;
}
*/

.BoardGameContainer.RightMenusCont{
	background-color: #284C9D;
  background-image: url('../img/BG/BlueTornado.svg');
  background-attachment: fixed;
  background-size: cover;
}
.RightMenusCont.RBoxContainer {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 20px;
  
}

.RightMenusCont.RBoxContainer > .CellsContainer{
	position: relative;
	width: 100%;
	height: 100%;
}


.BoardGameText,.Cell{
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;

  height: calc( ( ((100vh - 60px) ))/6 );
  height: calc( 100% / 6 );
  width: 11.1111%;width: calc(100% / 9);
  position: absolute;
  border: 2px solid transparent;
  color: #18191a;
  font-size: 10px;
  padding: 4px;
  overflow: hidden;font-weight:500;
  font-size: 9.8px;vertical-align: middle;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.Cell.ActiveBoardGameText{left: 0%;bottom: 0%;border-radius:0 0 0 15px;background-color: #e0e7f8;}
.BoardGameText:nth-child(1){left: 0%;bottom: 0%;border-radius:0 0 0 15px;}
.BoardGameText:nth-child(2){left: 11.111%;bottom: 0%;}
.BoardGameText:nth-child(3){left: 22.222%;bottom: 0%;}
.BoardGameText:nth-child(4){left: 33.333%;bottom: 0%;}
.BoardGameText:nth-child(5){left: 44.444%;bottom: 0%;}
.BoardGameText:nth-child(6){left: 55.555%;bottom: 0%;}
.BoardGameText:nth-child(7){left: 66.666%;bottom: 0%;}
.BoardGameText:nth-child(8){left: 77.777%;bottom: 0%;}
.BoardGameText:nth-child(9){left: 88.888%;bottom: 0%;border-radius: 0 0 15px 0 ;}




.BoardGameText:nth-child(10){left:88.888%;bottom: 16.6666666%;bottom: calc(100% / 6);}
.BoardGameText:nth-child(11){left: 88.888%;bottom: 33.3333333%;bottom: calc( 200% / 6);}
.BoardGameText:nth-child(12){left: 88.888%;bottom: 50%;bottom: calc( 300% / 6);}
.BoardGameText:nth-child(13){left: 88.888%;bottom:66.666666%; bottom: calc( 400% / 6);}
.BoardGameText:nth-child(14){left: 88.888%;bottom: 83.6%;bottom: calc( 500% / 6);border-radius:0 15px 0 0 ;}



.BoardGameText:nth-child(15){left: 77.777%;bottom: 83.6%;bottom: calc( 500% / 6);}
.BoardGameText:nth-child(16){left: 66.666%;bottom: 83.6%;bottom: calc( 500% / 6);}
.BoardGameText:nth-child(17){left: 55.555%;bottom: 83.6%;bottom: calc( 500% / 6);}
.BoardGameText:nth-child(18){left: 44.444%;bottom: 83.6%;bottom: calc( 500% / 6);}
.BoardGameText:nth-child(19){left: 33.333%;bottom: 83.6%;bottom: calc( 500% / 6);}
.BoardGameText:nth-child(20){left: 22.222%;bottom: 83.6%;bottom: calc( 500% / 6);}
.BoardGameText:nth-child(21){left: 11.111%;bottom: 83.6%;bottom: calc( 500% / 6);}
.BoardGameText:nth-child(22){left: 0%;bottom: 83.6%;bottom: calc( 500% / 6);border-radius:15px 0 0 0 ;}




.BoardGameText:nth-child(23){left: 0%;bottom: 66.766667668%;bottom: calc( 400% / 6);}
.BoardGameText:nth-child(24){left: 0%; bottom: 50%;bottom: calc( 300% / 6);}
.BoardGameText:nth-child(25){left: 0%;bottom: 33.3333333%;bottom: calc( 200% / 6);}
.BoardGameText:nth-child(26){left: 0%;bottom: 16.6666666%;bottom: calc(100% / 6);}


.BoardGameText:nth-child(odd){background-color:#e0e7f8;}

.BoardGameText:nth-child(even){background-color:#ffffff;}
.ActiveBoardGameText.BoardGameText,.Cell.ActiveBoardGameText {
    background-color: #284c9d !important;
    border: 3px solid #284c9d;
    color: white;
}




#QuesAnswerDiv,#FinishedMessage{
	position: fixed;
	top:0;left:0;
	width: 100%;
	height: 100%;
	z-index: 99999999999999991 !important;
}

.CloseDiv{cursor: pointer;width:100%;height: 100vh;height: calc(var(--vh, 1vh) * 100);background-color: rgba(0,0,0,0.7);position: fixed;z-index: 161;top: 0px;left: 0px;

}

.MessageContainer{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);display: flex;flex-direction: column;overflow: hidden;border-radius: 10px;min-width:40%;max-width: 80% ;max-height: 100vh;position: absolute;z-index: 999999999999999999999999999;}


.MessageTitleText{display: inline-block;width: 100%;text-align: center;color: white;font-size: 12px;line-height: 30px;}


/** BoardGame Preview End **/





/********** BoardGame Pro Themes start **********/
.MainBoardGameProTheme1{
    background-image: url('../img/GameThemes/BoardGamePro/BGs/BoardGameProBG1.webp');
}
.MainBoardGameProTheme2{
    background-image: url('../img/GameThemes/BoardGamePro/BGs/BoardGameProBG2.webp');
}

.BoardGameProContainer .BoardGameProTheme1{
    background-color: #284C9D;
    background-image: url(../img/BG/BlueTornado.svg);
    background-attachment: fixed;
    background-size: cover;
    
    padding:15px;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}
.BoardGameProContainer .BoardGameProTheme1 path{
    fill:white;
}


.MainBoardGameProTheme2 .RightMenusCont{
    background-color: #2525251f;
    background-image:unset;
}
.MainBoardGameProTheme2 .GameContainer{
     background-color:transparent;
}
.BoardGameProContainer .BoardGameProTheme2{
    background-color: #2525251f;
    background-image: unset;
    padding:15px;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}



.BoardGameProTheme1 foreignObject {
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#BoardGameProPreview .BoardGameProTheme1 foreignObject>div{
    background-color:#284c9d;
}
.BoardGameProTheme1 foreignObject>p,.BoardGameProTheme1 foreignObject>div{
    padding:15px;
    background-color:inherit;width:100%;height:100%;top:0;line-height: 128px/*33px*/;text-align:center;/******************* Newly Added ****************/
}
/*
.BoardGameProTheme1 foreignObject:nth-child(even)>p{
    line-height: 212px;
}*/






.BoardGameProTheme2>g>foreignObject>.ActiveCell{
    background-color:#274a98;
}
.BoardGameProTheme2>g>foreignObject{
    position:relative;
	fill:#8bb640;
	background: #FFFFFF;
	display: flex;
	-webkit-box-shadow: 0px 0px 45px -5px rgb(0 0 0 / 23%);
	-moz-box-shadow: 0px 0px 45px -5px rgba(0,0,0,0.23);
	box-shadow: 0px 0px 45px -5px rgb(0 0 0 / 23%);	
}
.BoardGameProTheme2>g>foreignObject:nth-child(odd){
	background-color:#284c9d/*#8bb640*/;
}
.BoardGameProTheme2>g>foreignObject>p.BoardGameProText{
	width:100%;
	/*height: 100%;height:unset;*/
	padding:5px;padding:12px 20px;
	/*color:white;color:#8bb640;*/color:inherit;
	/*font-size:16px;*/
	font-weight: 600;
	
    display: block;position:absolute;top:0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color:inherit !important;height:100%;color:inherit;/* <--------------------------- Newly Added ------------------------------------*/
    
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
}


.BoardGameProTheme2>g:nth-child(1)>foreignObject:first-child{
	border-radius: 0 15px 15px  0;
}
.BoardGameProTheme2>g:nth-child(1)>foreignObject:last-child{
	border-radius: 0 0 0 150px;
}
.BoardGameProTheme2>g:nth-child(2)>foreignObject:first-child{
	border-radius: 150px 0 0 0;
}
.BoardGameProTheme2>g:nth-child(2)>foreignObject:last-child{
	border-radius: 0 0 150px 0;
}
.BoardGameProTheme2>g:nth-child(3)>foreignObject:first-child{
	border-radius: 0 150px 0 0;
}
.BoardGameProTheme2>g:nth-child(3)>foreignObject:last-child{
	border-radius: 0 0 0 150px;
}
.BoardGameProTheme2>g:nth-child(4)>foreignObject:first-child{
	border-radius: 150px 0 0 0;
}
.BoardGameProTheme2>g:nth-child(4)>foreignObject:last-child{
	border-radius: 0 15px 15px 0;
}







.BoardGameProTheme2 .BoardGameTextFaded,.BoardGameProTheme2 .BoardGameProText{
    background-color:transparent/*#284c9d*/;background-color:inherit;
    color:white;color:inherit;
    padding: 12px 20px;
    font-size: 20px;
    top:0;
}



.BoardGamePro16Theme2>g:nth-child(1)>foreignObject:nth-child(odd){
    line-height:289.81px;
    text-align:left;
    color:#FFFFFF;
}
.BoardGamePro16Theme2>g:nth-child(1)>foreignObject:nth-child(even){
    text-align:right;
    color:#071430;
}

.BoardGamePro16Theme2>g:nth-child(2)>foreignObject:nth-child(odd){
    line-height:289.81px;
    text-align:right;
    color:#FFFFFF;
}
.BoardGamePro16Theme2>g:nth-child(2)>foreignObject:nth-child(even){
    text-align:left;
    color:#071430;
}
.BoardGamePro16Theme2>g:nth-child(2)>foreignObject:last-child{
    line-height:unset/*289.81px/*161.81px*/;
    text-align:left;
}

.BoardGamePro16Theme2>g:nth-child(3)>foreignObject:nth-child(odd){
    line-height:289.81px;
    text-align:left;
    background-color:white;
    color:#071430;
    
}
.BoardGamePro16Theme2>g:nth-child(3)>foreignObject:nth-child(odd)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro16Theme2>g:nth-child(3)>foreignObject:nth-child(even){
    text-align:right;
    background-color:#284c9d;
    color:white;
}
.BoardGamePro16Theme2>g:nth-child(3)>foreignObject:nth-child(even)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro16Theme2>g:nth-child(3)>foreignObject:last-child{
    line-height:unset;
    text-align:right;
}

.BoardGamePro16Theme2>g:nth-child(4)>foreignObject:nth-child(odd){
    line-height:289.81px;
    text-align:right;
    color:#FFFFFF;
}
.BoardGamePro16Theme2>g:nth-child(4)>foreignObject:nth-child(even){
    text-align:left;
    color:#071430;
}
.BoardGamePro16Theme2>g:nth-child(4)>foreignObject:last-child{
    line-height:289.81px;
    text-align:right;
}









.BoardGamePro18Theme2>g>foreignObject>p.BoardGameProText,.BoardGamePro18Theme2>g>foreignObject>p.BoardGameTextFaded{
    font-size: 19px;color:white;width:100%;height:100%;
}
.BoardGamePro18Theme2>g:nth-child(1)>foreignObject:nth-child(odd){
    text-align:right;
}
.BoardGamePro18Theme2>g:nth-child(1)>foreignObject:nth-child(even){
    line-height:289.81px;
    text-align:left;
    
    background-color:white;
    color:#071430;
}

.BoardGamePro18Theme2>g:nth-child(1)>foreignObject:nth-child(even)>p{
    color:inherit;
    background-color:inherit;
}

.BoardGamePro18Theme2>g:nth-child(2)>foreignObject:nth-child(odd){
    line-height:289.81px;
    text-align:right;
    background-color:white;
    color:#071430;
}
.BoardGamePro18Theme2>g:nth-child(2)>foreignObject:nth-child(odd)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro18Theme2>g:nth-child(2)>foreignObject:nth-child(even){
    text-align:left;
    
    background-color:#284c9d;
    color:white;
}
.BoardGamePro18Theme2>g:nth-child(2)>foreignObject:nth-child(even)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro18Theme2>g:nth-child(2)>foreignObject:last-child{
    line-height:unset/*289.81px/*161.81px*/;
    text-align:left;
}

.BoardGamePro18Theme2>g:nth-child(3)>foreignObject:nth-child(odd){
    line-height:289.81px;
    text-align:left;
    background-color:#284c9d;
    color:white;
}
.BoardGamePro18Theme2>g:nth-child(3)>foreignObject:nth-child(odd)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro18Theme2>g:nth-child(3)>foreignObject:nth-child(even){
    text-align:right;
    background-color:white;
}
.BoardGamePro18Theme2>g:nth-child(3)>foreignObject:nth-child(even)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro18Theme2>g:nth-child(3)>foreignObject:last-child{
    line-height:unset;
    text-align:right;
}

.BoardGamePro18Theme2>g:nth-child(4)>foreignObject:nth-child(odd){
    line-height:289.81px;
    text-align:right;
    background-color:#FFFFFF;
    color:#071430;
}
.BoardGamePro18Theme2>g:nth-child(4)>foreignObject:nth-child(even){
    text-align:left;
    background-color:#284c9d;
    color:#FFFFFF;
}

.BoardGamePro18Theme2>g:nth-child(4)>foreignObject:nth-child(odd)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro18Theme2>g:nth-child(4)>foreignObject:nth-child(even)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro18Theme2>g:nth-child(4)>foreignObject:last-child{
    line-height:289.81px;
    text-align:right;
}











.BoardGamePro20Theme2>g>foreignObject>p.BoardGameProText,.BoardGamePro20Theme2>g>foreignObject>p.BoardGameTextFaded{
    font-size: 19px;color:white;
}
.BoardGamePro20Theme2>g:nth-child(1)>foreignObject:nth-child(odd){
    line-height:235.81px;
    text-align:left;
}
.BoardGamePro20Theme2>g:nth-child(1)>foreignObject:nth-child(even){
    text-align:right;
    background-color:white;
    color:#071430;
}
.BoardGamePro20Theme2>g:nth-child(1)>foreignObject:nth-child(even)>p{
    color:inherit;background-color:inherit;
}
.BoardGamePro20Theme2>g:nth-child(2)>foreignObject:nth-child(odd){
    line-height:235.81px;
    text-align:right;
    background-color:white;
    color:#071430;
    
    background-color:#284c9d;
    color:white;
}
.BoardGamePro20Theme2>g:nth-child(2)>foreignObject:nth-child(odd)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro20Theme2>g:nth-child(2)>foreignObject:nth-child(even){
    text-align:left;
    background-color:transparent;
    color:#071430;
    
    background-color:white;
    color:#071430;
}
.BoardGamePro20Theme2>g:nth-child(2)>foreignObject:nth-child(even)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro20Theme2>g:nth-child(2)>foreignObject:last-child{
    line-height:unset/*289.81px/*161.81px*/;
    text-align:left;
}

.BoardGamePro20Theme2>g:nth-child(3)>foreignObject:nth-child(odd){
    line-height:235.81px;
    text-align:left;
    background-color:#284c9d;
    color:white;
}
.BoardGamePro20Theme2>g:nth-child(3)>foreignObject:nth-child(odd)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro20Theme2>g:nth-child(3)>foreignObject:nth-child(even){
    text-align:right;
    background-color:white;
    color:#071430;
}
.BoardGamePro20Theme2>g:nth-child(3)>foreignObject:nth-child(even)>p{
    
    background-color:inherit;
    color:inherit;
}
.BoardGamePro20Theme2>g:nth-child(3)>foreignObject:last-child{
    line-height:unset;
    text-align:right;
}

.BoardGamePro20Theme2>g:nth-child(4)>foreignObject:nth-child(odd){
    line-height:235.81px;
    text-align:right;
    background-color:#284c9d;
    color:#FFFFFF;
    
}
.BoardGamePro20Theme2>g:nth-child(4)>foreignObject:nth-child(even){
    text-align:left;
    background-color:#FFFFFF;
     color:#071430;
}

.BoardGamePro20Theme2>g:nth-child(4)>foreignObject:nth-child(odd)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro20Theme2>g:nth-child(4)>foreignObject:nth-child(even)>p{
    background-color:inherit;
    color:inherit;
}
.BoardGamePro20Theme2>g:nth-child(4)>foreignObject:last-child{
    line-height:235.81px;
    text-align:right;
}


/********** BoardGame Pro Themes End **********/







/** Two Teams Preview Start ************/
	#TwoTeamsPreview{
		overflow-x: hidden;
		/*overflow-y: auto;*/
	}
	#TwoTeamsContainer{display:flex;justify-content: space-evenly;padding:10px;gap:10px;height: 100%;}
	.LeftTeam,.RightTeam{position: absolute;font-weight: bold;overflow: hidden;
		background: rgb(124,237,250);
		background: linear-gradient(45deg, rgba(124,237,250,1) 0%, rgba(35,172,201,1) 100%);
		bottom: 30px;z-index: 11;width: 36%;height:50px;line-height: 50px;
	}
	.LeftTeam{left: 0;border-radius: 0 2000px 2000px 0;}
	.RightTeam{right: 0;border-radius:  2000px 0 0 2000px;}
  .TwoTeamsActiveTextA,.TwoTeamsActiveTextB,.TwoTeamsActiveText{color:black !important;font-weight:500;}
	.StepsContainer{ transition: transform 1s;}
	.StepsContainer p{height: 40px;line-height: 40px;}
	#TeamAOverlay,#TeamBOverlay{background-color: rgba(0,0,0,0.7);width: 100%;height: 100%;display: none;}
	#TeamAOverlay{left: 0;}
	#TeamBOverlay{left: 50%;}

	.active{display: block !important;animation-name: FadeIn;animation-duration: 0.5s}
	.CurrentTurn{transition: border-color 0.5s;}




#TwoTeamsPreview .MainContainer{
	width: 100%;height: 100%;
	position: absolute;
	top: 0px;overflow: hidden;
    padding: 20px;
    padding-left: 110px;
    display: flex;
    
}

#TwoTeamsPreview .RightMenusCont{
  width: 66%;
  height: 100%;

}
#TwoTeamsPreview .RBoxContainer{
  width:100%;
  height: 100%;
  
}

#TwoTeamsPreview .RMenuTitle{
  transform-origin: 32px 32px;
  transform: rotate(90deg);
  width: calc( 100vh - 80px);
}

#TwoTeamsPreview .RMenuTitle span{font-weight: bold;}

#TwoTeamsPreview .RMenuTitle p{
	color: white;width: calc( 100vh - 80px);
	-webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  text-align: center;
  font-size: 38px;
}





#WordDiceRolled{line-height: 80px;font-weight: bold;display: inline-block;padding: 0;}
#DiceRolled{display: inline-block;height: 80px;vertical-align: top;padding-right: 10px;font-size: 20px;}

#QuestionText{font-size: 20px;}

#TwoTeamsPreview .GameContainer{background-color: #242a3c98;border: 2px solid white;}


	    
	    .RBoxContainer{overflow:hidden;}
	 
	    
	    .StepsContainer{height:100%;top:calc(50% - 22.5px);position:relative;}
	    
	    .TeamInnerContainer{
	    	height:100%;
	    	overflow:hidden;
	    	width:100%;max-width: 230px;
	    	border:10px solid #54a5e3;
	    	background-color:#eaeae6;
	    	position:relative;
	    	border-radius:15px;
	    }
	    
	    
	    .TeamTitle{font-weight:bold;color:white;font-size:24px;padding:10px 0}
	    
	    .LeftTeamMark,.RightTeamMark{position:absolute;height:0px;top:50%;top:calc(50% - 15px);width:0px;border: 15px solid transparent;border-left: 15px solid #ec6f6f40;}
	    .RightTeamMark{border-left: 15px solid transparent ;border-right: 15px solid #ec6f6f40 ;right:0px;}
	    
	    .StepsContainer p{color:rgba(0,0,0,0.3);}

	    
	    
	    
	    
	    /*New Styles */
	    
	    .TeamContainer{
	    	height:100%;
	    	display:flex;background-size:cover;background-color:#cee3e4;
	    	flex-direction: column;
	    	align-items: center;
	    	width:90%;

	    	padding:0 20px 15px;border-radius:15px;
	    }	    
	    .TeamAContainer .TeamTitle{color:#549fa2;}
	    .TeamBContainer .TeamTitle{color:#d96968;}	    
	    .TeamAData div,.TeamBData div{width:100%;}
	    
	    .TeamAContainer .TeamInnerContainer{border: 10px solid #549fa2;}
	    .TeamBContainer .TeamInnerContainer{border: 10px solid #d96968;}
	    
	    .RightTeamMark {border-right: 15px solid #549fa2;}
	    .LeftTeamMark {border-left : 15px solid #d96968;}


/** Two Teams Preview End ************************/















/** Two Teams Preview Start **/

.TwoTeamsCont{
	display: flex;
	width: 100%;
	height: 100%;
	padding:30px;

	overflow-y: auto;
}

.TwoTeamsCont {
  scrollbar-width: auto;
  scrollbar-color: #4d4d4d lightgrey;
}
.TwoTeamsCont::-webkit-scrollbar {
  width: 14px;
}
.TwoTeamsCont::-webkit-scrollbar-track {
  background: gainsboro;
}
.TwoTeamsCont::-webkit-scrollbar-thumb {
  background-color: #1f2e4f;
  border-radius: 10px;
  border: 2px solid lightgrey;
}



.TwoTeamsSingleTeamCont{
	width: 100%;
	padding: 15px;	
}

.TwoTeamsSingleTeamCont>div{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 10px 0;
}

.TwoTeamsSingleTeamCont>div>label{
	text-align: center;
	width: 43px;
	height: 100%;
	padding-right:10px;
}

.TwoTeamsSingleTeamCont>div>input{
	display: block;
	width: 100%;
	background-color: white;
	padding: 10px;
	border:none;
	border-bottom: 2px solid grey;
	font-weight: 500;

	-moz-border-radius:8px;
	-khtml-border-radius:8px;
	-webkit-border-radius: 8px;    
	border-radius: 8px;
}

.TwoTeamsTeamAInput{
	margin-right:30px;
}


.TwoTeamsTeamLabelCont{
	width: 100%;
	display: flex;
}
.TwoTeamsTeamLabelCont>div{
	width: 50%;
	text-align: center;
	font-weight: 700;
	font-size: 18px;
}

/** Two Teams Preview End **/






/** LiveBoard Game Preview ***************/

.LiveBoardContainer {
    width:100%;height:100%;
}
.LiveBoardContainer .RBoxContainer>div{
    width:100%;height:100%;
}


.LiveBoardContainer .GameContainer {
    width:100%;height:100%;
}

.LiveBoardContainer .GameContainer svg{
    width:100%;height:100%;
}


































































/******************************* Loading *********************************/
#ResMess{
    top:0;left:0;
    height:100%;
    width:100%;z-index:999999999999999999999999;
    position:fixed;
    
    display:flex;justify-content:center;
    align-items:center;
    
    background-color: #00000030;
}

.WhiteBgContainer{
    padding:10px;
    background-color:white;
    border-radius:20px;
    
    -webkit-box-shadow: 0px 0px 55px -7px rgb(0 0 0 / 33%);
    -moz-box-shadow: 0px 0px 55px -7px rgba(0,0,0,0.33);
    box-shadow: 0 0px 55px -7px rgb(0 0 0 / 33%);
}
.WhiteBgContainer svg{
    width:100px;height:100px;
}


.WhiteBgContainer svg path{
    fill:#424242;
}















































/******************************************** Error Menu Popups **********************************************************/

.ErrorPopUp{
    margin:auto;
    padding:20px;
    background-color:white;
    max-width:450px;
    width:100%;
}


.ErrorPopUp img{
    width:200px;height:200px;
}














































/******************************************************** Payment Gateway approvals **************************************************/




.Success .ui-success{
    display:block;
}
.Success .ui-error{
    display:none;
}
.Error .ui-success{
    display:none;
}
.Error .ui-error{
    display:block;
}

.ui-success,
.ui-error {
    display:block;
    width: 100px;
    height: 100px;
    margin-bottom:25px;
}
.ui-success-circle {
  stroke-dasharray: 260.75219025px, 260.75219025px;
  stroke-dashoffset: 260.75219025px;
  /*transform: rotate(220deg);*/
  transform-origin: center center;
  stroke-linecap: round;
  animation: ani-success-circle 1s ease-in both;
}
.ui-success-path {
  stroke-dasharray: 60px 64px;
  stroke-dashoffset: 62px;
  stroke-linecap: round;
  animation: ani-success-path 0.4s 1s ease-in both;
}
@keyframes ani-success-circle {
  to {
    stroke-dashoffset: 782.25657074px;
  }
}
@keyframes ani-success-path {
  0% {
    stroke-dashoffset: 62px;
  }
  65% {
    stroke-dashoffset: -5px;
  }
  84% {
    stroke-dashoffset: 4px;
  }
  100% {
    stroke-dashoffset: -2px;
  }
}
.ui-error-circle {
  stroke-dasharray: 260.75219025px, 260.75219025px;
  stroke-dashoffset: 260.75219025px;
  animation: ani-error-circle 1.2s linear;
}
.ui-error-line1 {
  stroke-dasharray: 54px 55px;
  stroke-dashoffset: 55px;
  stroke-linecap: round;
  animation: ani-error-line 0.15s 1.2s linear both;
}
.ui-error-line2 {
  stroke-dasharray: 54px 55px;
  stroke-dashoffset: 55px;
  stroke-linecap: round;
  animation: ani-error-line 0.2s 0.9s linear both;
}
@keyframes ani-error-line {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ani-error-circle {
  0% {
    stroke-dasharray: 0, 260.75219025px;
    stroke-dashoffset: 0;
  }
  35% {
    stroke-dasharray: 120px, 120px;
    stroke-dashoffset: -120px;
  }
  70% {
    stroke-dasharray: 0, 260.75219025px;
    stroke-dashoffset: -260.75219025px;
  }
  100% {
    stroke-dasharray: 260.75219025px, 0;
    stroke-dashoffset: -260.75219025px;
  }
}











/******************************************** Students Account Creator **********************************************************/
#ClassroomsSelect + .nice-select,#StudentsSelector + .nice-select,#GameSelect + .nice-select {
    background-color: #fff;
    border-radius: 8px;
    border: solid 2px #dddddd;
    font-size: 14px;
    font-weight: 500;
    height: 47px;
    line-height: 47px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    transition: all .2s ease-in-out;
    user-select: none;
    white-space: nowrap;
    width: 100%;
}







































/******************************************** Room Creator **********************************************************/


.SelectedUsersContainer{
    display:flex;flex-wrap:wrap;gap:5px;
    background-color: #fff;
    border-radius: 8px;
    border: solid 2px #dddddd;
    font-size: 14px;
    font-weight: 500;
    min-height: 47px;
    outline: none;
    padding:3px;
    position: relative;
    text-align: left !important;
    transition: all .2s ease-in-out;
    user-select: none;
    white-space: nowrap;
    width: 100%;
}

.selectedUserGroup{
    display:inline-flex;justify-content:flex-start;align-items:flex-start;font-size:13px;
    background: #dedede;
    padding: 5px 5px 5px 8px;
    border-radius: 4px;
    
}
.selectedUserGroup>div:first-child{
    width:100%;
    position:relative;
}
.selectedUserGroup p{
    font-weight: 600;
    line-height: 13px;
}
.selectedUserGroup span{
    position:absolute;
    width:100%;
    font-weight:400;
    color:grey;
    font-size:11px;
    display:block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}





.DelUserSel{
  position: relative;
  padding: 12px;
  border: none;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  display:inline-block;
  margin:auto 2px auto 6px;
}

.DelUserSel:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background-color: #333;
  transform: translate(-50%, -50%) rotate(45deg);
}

.DelUserSel:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background-color: #333;
  transform: translate(-50%, -50%) rotate(-45deg);
}











































/********************************* Custom Table Start **********************************/
    .dragging,.dragging a{
	    cursor:grabbing !important;
	}
	
	.TableCont{
	    overflow-x: auto;
        overflow-y: hidden;overflow-x: hidden;
        
        -webkit-overflow-scrolling: touch;
        width:100%;
        max-width:900px;
        
        border-radius:5px;
        overflow:hidden;
        cursor: grab;
        
	}
    table.BrandTable {
        width: 100%;
        margin: 0;
        font-size: 18px;
        text-align: left;
        
        
        border-collapse: collapse;
        
    }
    
    .BrandTable thead tr {
        font-weight: 600;
        background-color: #3b82f6;
        color: white;
        text-align: left;
        
    }
    .BrandTable tbody tr {
        
        border: 1px solid #ddd;
        border-width:0 1px;
    }
    .BrandTable th,.BrandTable td{
        padding:12px 22px 12px 20px;
        font-size:15px;
        white-space: nowrap;
    }
    
    
    .BrandTable td .alert{
        padding: 0 10px;
    }
    
    
    .BrandTable td{
        padding:0px;
    }
    .BrandTable td.AlertCont{
        padding:12px 22px 12px 20px;
    }
    .BrandTable td a,.BrandTable td p{
        width:100%;
        padding:12px 23px;
        color:#181818;
        width:100%;
        height:100%;
    }
    .BrandTable td a:hover{
        color:#333333;
        text-decoration:underline;
    }
    
    .BrandTable td a svg{
        display:inline-block;
        vertical-align:middle;
        width:20px;
        height:20px;
        margin-right:8px;
    }
    .BrandTable td a svg path{
        fill:#000;
    }
    
    .BrandTable td a:hover svg path{
        fill:#333333;
    }
    
    .BrandTable tbody tr {
        border-bottom: 1px solid #dddddd99;
    }
    
    .BrandTable tbody tr:nth-of-type(even) {
        background-color: #f3f3f39e;
    }
    
    .BrandTable tbody tr:nth-of-type(odd) {
        background-color: #fff;
    }
    
    .BrandTable tbody tr:last-of-type {
        border-bottom: 2px solid #3b82f620;
    }
    
    .BrandTable tbody tr:hover {
        background-color: #e1f0ff/*#f1f1f1*/;
    }
    
    
    
    
    .BrandTable thead th:first-child {
        border-top-left-radius: 6px;
    }
    
    .BrandTable thead th:last-child {
        border-top-right-radius: 6px;
    }
    
    .BrandTable tbody td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    .BrandTable tbody td:last-child {
        border-bottom-right-radius: 6px;
    }
    
    
    
    
    .BrandAlert {
        font-size:12px;
        font-weight:500;
        padding: 4px 10px;
        border-radius: 30px;
        position: relative;
        display: inline-block;
    }
    .BrandAlert.success { background-color: #4CAF50; color: white; }
    .BrandAlert.warning { background-color: #ff9800; color: white; }
    .BrandAlert.danger { background-color: #f44336; color: white; }
    .BrandAlert.info { background-color: #2196F3; color: white; }
    
    .BrandAlert strong {
        font-weight: 600;
    }

/********************************* Custom Table End **********************************/
















/********************************* Metrics Start **********************************/
    .MetricsCont{
        width:100%;max-width:700px;
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }
    .MetricsCard{
        display:flex;
        justify-content:flex-start;
        align-items:center;
        background-color:#f6f6f6;
        color:#3b82f6;
        border-radius:10px;
        padding:20px;
        gap:15px;
        width:300px;
    }
    .MetricsCard:hover{
        background-color:#e1f0ff;
    }
    .MetricsCont .IconCont{
        width:70px;
        height:70px;
        
        background-color:#ffffff30;background-color:#ffffff4f
        flex-shrink:0;
        border-radius:50%;
    }
    .MetricsCard svg{
        height:100%;
        width:100%;
        padding:15px;
    }
    
    .MetricsCard div>span{
        font-weight:700;
        font-size:22px;
    }
    .MetricsCard div>p{
        font-size:15px;
        font-weight:400;
    }



/********************************* Metrics End **********************************/














/****************************** Form Inputs Start *******************************/


.BrandFormInputCont{
    width: 100% !important;
    display: block !important;
    padding: 10px 0px 10px 0 !important;
    position: relative;
}
.BrandFormInputCont>input {
    background-color: transparent;
    border: 2px solid #dddddd;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding: 10px 13px;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
}

.BrandFormInputCont>input+span {
    top: 20px;
    color: #737373 /*#3b3b3b*/;
    font-size: 15px;
    font-weight: 500;
}
.BrandFormInputCont>span {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 2;
    background-color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 0 7px;
    -webkit-transition: top 0.05s;
    -moz-transition: top 0.05s;
    -ms-transition: top 0.05s;
    -o-transition: top 0.05s;
    transition: top 0.05s;
}








.BrandFormInputCont>input:focus + span{
	top:1px;
	color: #3b3b3b/*#141414*/;
	font-size: 12px;
}


.BrandFormInputCont>input:not(:placeholder-shown)+span  {
	top:1px;
	color: #3b3b3b/*#141414*/;
	font-size: 12px;

}

.BrandFormInputCont>input::placeholder {
	color: white;
}

.BrandFormInputCont>input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: white;
}

.BrandFormInputCont>input::-ms-input-placeholder { /* Microsoft Edge */
	color: white;
}





























.dropdownItems {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 2px solid #f4f4f4;
    max-height: 150px;
    overflow-y: auto;
    width: 100%;
    z-index:5;
    border-radius:7px;overflow:hidden;
}

.dropdownItems div {
    padding: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-radius:5px;overflow:hidden;
}

.dropdownItems div>span{
    display:block;
    font-size:13px;
    font-weight: 400;
}

.dropdownItems div:hover {
    background-color: #e1f0ff;
}

.showDropdown {
    display: block;
}

.SearchInput {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.BrandDropdown {
    position: relative;
}
/*

.BrandDropdownCont {
    position: relative;
    display: inline-block;
}

.BrandDropdown {
    display: none;
    position: relative;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
}

.BrandDropdown.open {
    display: block;
}

.BrandDropdownItem {
    padding: 8px;
    cursor: pointer;
}

.BrandDropdownItem:hover {
    background-color: #f0f0f0;
}

.SearchInput {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
}
*/

/****************************** Form Inputs End *******************************/


























/********************************* Integration Start **********************************/

.CompanyDashboardFullHeightCenter{
    height: calc(100vh - 100px);display: flex;justify-content: center;align-items: center;
}

.IntegrationsHeaderCont{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.IntegrationsHeaderCont h1{
    display:inline-flex;
    text-align:left;
}
.IntegrationsHeaderCont .BrandBtn{
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
    display:flex;
    align-items:center;
    gap:6px;
    padding:13px 30px;
}

.IntegrationsHeaderCont .BrandBtn svg{
    fill:white;
    height:13px;width:13px;
}


















/*********** Dynamic Popup Window ***********/