@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src:
		local('OpenSans'), local('Open Sans'),
		url(/Fonts/open-sans-v13-latin-regular.woff2) format('woff2'),
		url(/Fonts/open-sans-v13-latin-regular.woff) format('woff'),
		url(/Fonts/open-sans-v13-latin-regular.ttf) format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

* { box-sizing:border-box; color:#fff; margin:0px; padding:0px; font-family: 'OpeSa', tahoma,helvetica,sans-serif; /*overflow:hidden;*/ box-sizing:border-box; }
html {height:100%; max-width: 100%; overflow-x:hidden; }
body {height:100%; max-width: 100%; overflow-x:hidden; background-image:url("/images/DarkBgr4R-GBLQ.jpg"); background-size:100% 100%; }
body::before {
		content: "";
		position: absolute;
		height: 50%; width: 50%;
		background: url(/images/BlueBgrLQ.jpg);
		background-size: cover;
		z-index: -3; /* Keep the background behind the content */
		
		/* don't forget to use the prefixes you need */
		-webkit-transform: scale(2);
		-webkit-transform-origin: top left;
		-webkit-filter: blur(5px) contrast(0.95) brightness(0.5) hue-rotate(10deg);
		-moz-transform: scale(2);
		-moz-transform-origin: top left;
		-moz-filter: blur(5px) contrast(0.95) brightness(0.5) hue-rotate(10deg);
		-transform: scale(2);
		-transform-origin: top left;
		filter: blur(5px) contrast(0.95) brightness(0.5) hue-rotate(10deg);
		-webkit-filter: hue-rotate(100deg) brightness(0.4) blur(2px); -moz-filter: hue-rotate(100deg) brightness(0.4) blur(2px); filter: hue-rotate(100deg) brightness(0.4) blur(2px);
		-webkit-filter: hue-rotate(100deg) brightness(0.4) blur(2px); -moz-filter: hue-rotate(100deg) brightness(0.4) blur(2px); filter: hue-rotate(100deg) brightness(0.4) blur(2px);
	}




@media screen and (max-width : 480px) /*and (orientation : portrait) */{
	#Mid { min-height:calc(100% - 15.35vh - 20px); display:block; width:100%; overflow-y:hidden; }
		#Left { width:100%; float:left; }
			#Main       { display:block; width:100%; min-height:20vh; margin:0px; border-radius:9.5px; /*padding:0px;*/ box-shadow:none; overflow-y:hidden; }
			#LeftPanel  { display:block; width:100%; min-height:20vh; margin:0px; border-radius:9.5px; /*padding:0px;*/ box-shadow:none; overflow-y:hidden; } /* background:linear-gradient(#f88, #f44); */
		#RightPanel     { display:block; width:100%; min-height:30vh; margin:0px; border-radius:9.5px; /*padding:0px;*/ box-shadow:none; overflow-y:hidden; }
	
	main {display:flex; width:100%; height:auto; background-color:rgba(0,0,0,0.15); flex-wrap:wrap; align-items:flex-start; }
	.Campaign { width:calc(100% - 23px); display:flex; flex-wrap:wrap; align-items:flex-start; }
	.Left { width:100%; }
	.Vid16_9 {display:inline; width:100%; height:calc(100vw * 0.5425); float:left; }
	.img1_1 {display:inline; width:40%; height:40vw; float:left; }
	.Prize, .Sponzor {display:inline; width:100%; float:left; }
	.Right { width:100%; display:flex; /*flex-direction:column; */flex-wrap:wrap; }
	.Right .Note { width:calc(50% - 20px); }
	.dialog { position:fixed; top:50%; left:50%; border:2px outset #777; padding:0px; background:rgba(64,0,0,0.75); }
	#AuthDlg { /*visibility:hidden;*/ margin-left:calc(-45%); width:90%; margin-top:-200px; }
	.Text, .MLText {border:1.5px inset #777; margin:0px 5px 10px 5px; padding:5px; background:rgba(0,0,0,0.35); width:calc(100% - 23px); }
	#MenuContent { position:relative;}
	#Languages, #ModalContent { max-width:100%; width:fit-content; }
}
/*@media screen and (max-width : 480px) and (orientation : landscape) {
	main {display:flex; width:100%; height:auto; background-color:rgba(0,0,0,0.15); flex-wrap:wrap; }
	.Campaign { width:calc(100% - 23px); display:flex; flex-wrap:wrap; align-items:flex-start; align-items:flex-start; }
	.Left { width:calc(80% - 23px); }
	.Vid16_9 {display:inline; width:80%; height:calc(80vw * 0.5425); float:left; }
	.img1_1 {display:inline; width:40%; height:40vw; float:left; }
	.Prize, .Sponzor {display:inline; width:calc(50% - 23px); float:left; }
	.Right { width:20%; display:flex; flex-direction:column; flex-wrap:wrap; }
}*/
@media screen and (min-width : 481px) {
	#Mid { min-height:calc(100% - 15.35vh - 20px); display:block; width:100%; overflow-y:hidden; }
		#Left { width:75%; float:left; }
			#Main       { display:block; float:right; width:66.67%; min-height:calc(100vh - 15.35vh - 20px); margin:0px; border-radius:9.5px; /*padding:0px;*/ box-shadow:none; overflow-y:hidden; }
			#LeftPanel  { display:block; width:33.33%; min-width:20vw; min-height:calc(100vh - 15.35vh - 20px); border-radius:9.5px; margin:0px; /*padding:0px; */ box-shadow:none; overflow-y:hidden;}
			#LeftPanel  { resize:horizontal; max-width:40%; } /* background:linear-gradient(#f88, #f44); */
		#RightPanel { border-radius:9.5px; box-shadow:none; padding:0px; margin:0px; overflow-y:hidden; }
		#RightPanel { display:block; float:right; width:25%; min-width:20vw; min-height:calc(100vh - 15.35vh - 20px); resize:horizontal; max-width:40%; }
	
	main {display:flex; width:100%; height:auto; background-color:rgba(0,0,0,0.15); flex-wrap:wrap; }
	.Campaign { width:calc(100% - 23px); display:flex; flex-wrap:wrap; align-items:flex-start; align-items:flex-start; }
	.Left { width:calc(80% - 23px); }
	.Vid16_9 {display:inline; width:80%; height:calc(80vw * 0.5425); float:left; }
	.img1_1 {display:inline; width:40%; height:40vw; float:left; }
	.Prize, .Sponzor {display:inline; width:calc(50% - 23px); float:left; }
	.Right { width:20%; display:flex; flex-direction:column; flex-wrap:wrap; }
	.dialog { position:fixed; top:50%; left:50%; border:2px outset #777; padding:0px; background:rgba(0,48,0,0.75); }
	#AuthDlg { /*visibility:hidden;*/ margin-left:-210px; margin-top:-200px; }
	.Text, .MLText {border:1.5px inset #777; margin:0px 5px 10px 5px; padding:5px; background:rgba(0,0,0,0.35); width:400px; max-width:100%; }
	#MenuContent { position:absolute;}
	#Languages, #ModalContent { max-width:75%; width:fit-content; }
}
/*@media screen and (min-width : 765px) and (orientation : landscape) {
	main {display:flex; width:100%; height:auto; background-color:rgba(0,0,0,0.15); flex-wrap:wrap; align-items:flex-start; }
	.Campaign { width:calc(50% - 23px); display:flex; flex-wrap:wrap; align-items:flex-start; }
	.Left { width:calc(80% - 23px); }
	.Vid16_9 {display:inline; width:80%; height:calc(80vw * 0.5425 * 0.5); float:left; }
	.img1_1 {display:inline; width:40%; height:20vw; float:left; }
	.Prize, .Sponzor {display:inline; width:calc(50% - 23px); float:left; }
	.Right { width:20%; display:flex; flex-direction:column; flex-wrap:wrap; }
}*/
@media screen and (min-width : 1025px) {
	main {display:flex; width:100%; height:auto; background-color:rgba(0,0,0,0.15); flex-wrap:wrap; align-items:flex-start; }
	.Campaign { width:calc(50% - 23px); display:flex; flex-wrap:wrap; align-items:flex-start; }
	.Left { width:calc(80% - 23px); }
	.Vid16_9 {display:inline; width:80%; height:calc(80vw * 0.5425 * 0.5); float:left; }
	.img1_1 {display:inline; width:40%; height:20vw; float:left; }
	.Prize, .Sponzor {display:inline; width:calc(50% - 23px); float:left; }
	.Right { width:20%; display:flex; flex-direction:column; flex-wrap:wrap; }
	.dialog { position:fixed; top:50%; left:50%; border:2px outset #777; padding:0px; background:rgba(0,0,128,0.75); }
	#AuthDlg { /*visibility:hidden;*/ margin-left:-210px; margin-top:-200px; }
	.Text, .MLText {border:1.5px inset #777; margin:0px 5px 10px 5px; padding:5px; background:rgba(0,0,0,0.35); width:400px; max-width:100%; }
	#MenuContent { position:absolute;}
	#Languages, #ModalContent { max-width:50%; width:fit-content; }
}





#Content {height:100%; width: 100%; }
.Group {background:rgba(0,0,0,0.04); border:1.5px outset #777; padding:5px; margin:0px; display:inline-block; vertical-align:top; }

.Button, .Button { Display:inline-block; cursor:pointer; user-select:none; }
.GroupTitle, .SectionTitle {/*width:97%; */text-align:center; margin:5px; }
.GroupTitle, .TopLabel, .Menu, .View {background:rgba(255,255,255,0.15); }
.SectionTitle { background-color:rgba(255,255,255,0.25); }
.TopLabel {/*width:100px;*/ padding:0px 10px 0px 10px; margin:10px 0px 0px 10px; display:inline-block; }
.Panel {background:rgba(0,0,0,0.25)/*linear-gradient(#355, #244)*/; border:1.5px outset #777; -webkit-resize:both; box-sizing: border-box; }
.Card, Button, .Button {background:rgba(255,255,255,0.05); border:1.5px outset #777; resize:both; box-sizing: border-box; }
.Text, .MLText { border:1.5px inset #777; margin:0px 15px 10px 5px; padding:5px; background:rgba(0,0,0,0.125); }
.Rounded, .TopLabel, .Panel, .Note, .Title, .SectionTitle, .GroupTitle, .PkgTitle, .Card, Button, .Button, .Group, .Menu, .View, .Text, .MLText, .SubMenus, .MenuItem {border-radius:9.5px}
Button, .Button {padding:0px 5px 0px 5px; margin:5px; }
.DarkShadow, .Task, .TopLabel, .Panel, .ProgressBarInner, .Group, .Note, .Card, .Title, .SectionTitle, .GroupTitle, .Menu, .View, .MenuItem:hover, .SubMenus, .GroupingItem:hover {box-shadow:rgba(0,0,0,0.5) 3px 4px 3px; }
.TextShadow, .Note, .Title, .SectionTitle, .GroupTitle { text-shadow:3px 3px 3px #000; }
.TitleText { font-size: calc(1.25vh + 1.25vw); }
.SectionTitleText { font-size: calc(1.5vh + 1.5vw); color:#fce; }
a:link	{ color: #fff; text-decoration: none; } /* unvisited link */
a:visited { color: #fff; text-decoration: none; } /* visited link */
a:hover   { color: #fff; text-decoration: underline; } /* mouse over link */
a:active  { color: #fff; text-decoration: underline; }   /* selected link */
.Draggable {}
.dialog { position:fixed; top:50%; left:50%; border:2px outset #777; padding:0px; }
.DialogTitle {border-bottom:2px outset #888; margin:0px 0px 5px 0px; padding:2px; font-size:120%; }
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label, input[type="checkbox"] + div { cursor:pointer; }
input[type="checkbox"] + label:before, input[type="checkbox"] + div:before {
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius:6px/*!important*/;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  margin: 0 .25em 0 0;
  padding:0;
  vertical-align: top;
  width: 16px;
  height: 16px;
}
input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + div:before { background: #000; color: #8df; content: "\2713"; text-align: center; }
/*input[type="checkbox"]:checked + label:after { background: #f00; font-weight: bold; }*/
.Checked { display:none; }
.Unchecked { display:inline-block; }
#NewUser .Unchecked { display:inline; }
input[type="checkbox"]:checked ~ .Checked { display:inline-block; }
/*#NewUser input[type="checkbox"]:checked ~ .Checked { display:inline; }*/
input#AuthDlgChkNewUser[type="checkbox"]:checked ~ .Checked { display:inline; }

input[type="checkbox"]:checked ~ .Unchecked { display:none; }
#NewUser input[type="checkbox"]:checked ~ .Unchecked { display:none; }


input.CollapsibleBase[type="checkbox"] + label:before, input[type="checkbox"] + div:before { content: "i"; text-align: center; border-radius:9px; }
input.Unhide[type="checkbox"] + label:before, input[type="checkbox"] + div:before { content: "👁"; text-align: center; border:none; color:#fae; font-size:150%; }

input { filter: none; }

/*input:-internal-autofill-previewed, input:-internal-autofill-selected {
background-color: #666;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
}*/
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
/*    border: 1px solid green;*/
    -webkit-text-fill-color: #c9b;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
/*    transition: background-color 5000s ease-in-out 0s;*/
}

.View, .Menu { display:inline-block; padding:2px 5px 2px 5px; margin:0px 5px 0px 5px; }
.Menu {z-index:999}
	.MenuItem { user-select:none; overflow-y: auto; position:static; /*text-align:left;*/ }
	.MenuItem	   {border:1.5px inset  #777; margin:5px; padding:5px; background:rgba(0,0,0,0.35); }
	.MenuItem:hover {border:1.5px outset #777; margin:5px; padding:5px; background:rgba(255,255,255,0.15); }
	.MenuItem:hover {/*background:#666; color:#cef; */}
	.Menu:hover, .View:hover {background:rgba(255,255,255,0.35); cursor:pointer; }
	.Menu:hover .SubMenus {display: inline-block; cursor:pointer; }
	.SubMenus {position: absolute; top:23px; display:none; padding:10px; }
	.SubMenus {background:rgba(255,255,255,0.25); border:1.5px outset #777; }
.Blur {	-webkit-filter:blur(2px) brightness(0.5);
	-moz-filter:blur(2px) brightness(0.5);
	filter:blur(2px) /*brightness(0.5)*/;
	backdrop-filter:blur(2px) /*brightness(0.5)*/; }

#LangSelFlag { float:right; }

.GroupingItem { background:rgba(0,0,0,0.15); padding:0px 5px 0px 5px; margin:3px 2px 3px 2px; border:1.5px inset #777; border-radius:6px!important }
.GroupingItem:hover { background:rgba(255,255,255,0.35); padding:0px 5px 0px 5px; margin:3px 2px 3px 2px; border:1.5px outset #777; border-radius:6px!important }

.Task		{color:#0ff; display:inline-block; padding:2px 7px 2px 7px; margin:2px 5px 2px 5px; background:rgba(128,128,255,0.25); /*border:0.5px outset #777;*/ border-radius:6px!important; }
.PriorityBase	{color:#0ff; }
.PriorityActual {color:#fa0; }

.SelectedGrouping { background:rgba(127,196,255,0.5); }

.UnderConstruction_ {display:none}
.BottomBtn {margin:5px; padding:2px 7px 2px 5px; }

#LoginBtn, #RegisterBtn { float:right; }


.LangItem { display:block; cursor:pointer; user-select:none; /*width:50vw;*/ margin:10px; /*padding:10px;*/ /*line-height:7vw; height:7vw; *//*vertical-align:middle; */}
.LangItem:focus { background-color: rgba(255,184,220, 0.5); }
.LangFlag { display:inline-block; /*width:10vw; */height:5vh; margin:5px; padding:0px; vertical-align:middle; box-shadow:rgba(192,192,192, 0.5) 1px 1px 10px 4px; }
.SmallLangFlag { display:inline-block; /*width:10vw; */height:2vh; margin:5px; padding:0px; vertical-align:middle; box-shadow:rgba(192,192,192, 0.5) 1px 1px 10px 4px; }
.LangLblNative, .LangLblEnglish { display:inline-block; margin:5px; padding:5px; line-height:5vh; height:5vh; vertical-align:middle; }
#_Languages { /* width: 50%; */ display: inline-block; margin: auto; /* text-align: center; */ }

#LanguageSelectorBackCover, #ModalBackCover { display:block; width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:-1; background-color: rgba(0,0,0,0.25); }
#LanguageSelector, #Modal {
    display: block;
    text-align: center;
	Background-color:rgba(102,46,85,0.28);
}
#ModalBackCover { Background-color:rgba(0,0,0,0.0); }
#Languages, #ModalContent {
    display: inline-block;
    margin: auto;
    text-align:left;
}
#RegWelcomeImg { display:block; width: calc(8vw + 8vh); margin: 25px auto; }
.DialogTitle { margin: 5px; }
.CTxt { text-align:center; }
.LTxt { display:inline-block; text-align:left; }
.RTxt { display:inline-block; text-align:right; }
.JTxt { display:inline-block; text-align:justify; }
.DlgCont { margin:10px; text-align:center; color:#fce; }

#Header { /*position:absolute;*/ display:block; top:0px; left:0px; right:0px; height:7.35vh; overflow:hidden; }
#Footer { /*position:absolute;*/ display:block; bottom:0px; left:0px; right:0px; height:8vh; }
.ProfileImage { width:6vh; border-radius:50%; display:inline-block; float:right; }
.Button, .Button { cursor:pointer; user-select:none; }
Button:disabled, .Button:disabled { color:#666; }
.InputMsg { color:#f84; }
.Menu { font-size:4.5vh; }
.MenuItem { font-size:1.0em; }
.MenuLbl { font-size:0.85em; display:inline-block; }
.DDMenuItem { font-size:0.85em; padding:10px 0px 0px 20px; }
.DDMenuItemLbl { font-size:1.0em; margin:5px 5px 5px -10px; }
.Block { width:100%; padding-bottom:20px; }
.W100P { width:100%; overflow:hidden; /*display:block; */}
.L { display:inline-block; }
.RA { text-align:right; }
.FR { float:right;}
.MH5 { margin:0px 5px 0px 5px; }
.Logogram, .Keyword { font-size:150%; }
.PkgDesc, .CollapsibleComment { font-size:80%; color:#fcc; text-align:justify; }
.PkgTitle, .StartedCourseTitle, .ActCourseTitle { padding:0px 5px 5px 5px; margin:0px 0px 5px 0px; background-color:rgba(255,255,255, 0.25);}
.ActCourseTitle { font-size:calc(1.5vh + 1.5vw)}
.DarkTxt { color:#a69; }
.BlockContent { width:100%; min-height:50px; }
.LearnDir { margin-top:0.5vh; }
.Tab { width:100%; }

#LanguageSelector, #Modal {
	display: block;
    /*z-index: 10;*/
    position: fixed;
    height: fit-content;
    max-height: 100%;
    margin: auto;
    overflow-y: auto;
    top: 0;
    bottom: 0;
}

#MenuContainer {
	position: fixed;
	overflow-y:auto;
	top: calc(5.2vh + 13px) ;
	bottom:0px;
	/*right: 0px;*/
	width:480px;
	min-width:50vw;
	max-width:100%;
	left: 0px;
	padding:0px;
	scrollbar-width:none;
	-ms-overflow-style: none;
	border-radius:0px;
	border:none;
	background-color:rgba(0,0,0, 0);
	padding:0px; margin:0px;
	overscroll-behavior: contain;
}
/** { -ms-overflow-style: none; }*/

#MenuContainer::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

#MenuContent { border-radius:9.5px; background-color:#857; padding:10px; font-size:3.5vh; }
#MenuBgr { width:100%; height:100%; position:fixed; cursor:default; }

.DD, .Lst { width:100%; cursor:pointer; user-select:none; position:relative; }
.DDLbl { width:calc(100% - 10px); padding:5px; margin:0px 0px 0px 10px; background-color:rgba(128,84,110, 0.25); }
.DDExp { width:calc(100% - 10px); padding:5px; margin:0px 0px 0px 10px; background-color:rgba(128,84,110, 0.5); }
.DDRow, .LstRow { width:calc(100% - 10px); padding:5px; margin:0px 0px 0px 10px; }
.DDLine { width:calc(100% - 10px); padding:5px; margin:5px 5px 5px 10px; width:calc(100% - 12px); }
.DD2Col, .Lst2Col { display:inline-block; width:45%; }
.DDSelRow, .LstSelRow { width:calc(100% - 10px); padding:5px; margin:0px 0px 0px 10px; background-color:rgba(255,184,220, 0.5); }
.DDDefRow { background-color:rgba(135,85,110, 0.5); }

.Disabled { color:#a84; cursor:not-allowed; }
.Enabled { color:#fd8; cursor:pointer; }

#AcceptTerms_AuthDlg { width:400px; max-width:100%; margin:50px 10px 10px 10px; }
.Hidden { display:none; }