@font-face {
    font-family: 'exo_2bold';
    src: url('../fonts/exo2-bold-webfont.woff2') format('woff2'),
         url('../fonts/exo2-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'exo_2medium';
    src: url('../fonts/exo2-medium-webfont.woff2') format('woff2'),
         url('../fonts/exo2-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'exo_2regular';
    src: url('../fonts/exo2-regular-webfont.woff2') format('woff2'),
         url('../fonts/exo2-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'exo_2light';
    src: url('../fonts/exo2-light-webfont.woff2') format('woff2'),
         url('../fonts/exo2-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




* {
	margin: 			0;
	padding: 			0;
	border: 			0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: 	border-box;
	box-sizing: 		border-box;

    -webkit-appearance: none;

	user-select: none;
}

h1,h2,h3,h4,h5{
    font-weight: normal;
}


/*
*:not(html) {
    -webkit-transform: 	translate3d(0, 0, 0);
}
*/

::selection {
	background: 		#00ff00;
	}

::-moz-selection {
	background: 		#00ff00;
}

html {
	width:				100%;
	height: 			100%;
	overflow-y: 		scroll;
	font-family: 		'exo_2regular',Arial,Georgia,Courier;
	font-weight:		normal;
	background: 		#222222;
}

body {
	width:				100%;
	height: 			100%;
	font-size:			14px;
	line-height:		18px;
	font-weight: 		normal;
	text-align:			left;
	color:				#e0e0e0;
}



#main{
	position:			relative;

	width:				100%;
	/*min-width: 		990px;*/
	/*max-width: 	 	800px;*/
	padding:			10px 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;  
	align-items: center; 
    }



#header{
	position: 			fixed;
	top:				0px;
	left: 				0px;
	width: 				100%;
	height: 			auto;
	font-size: 			14px;
	line-height:		20px;
	color: 				#f0f0f0;
	text-align: 		left;
	background: 		#000000;
	display: 			flex;
	justify-content: 	center;  
	align-items: 		center; 
	flex-direction: 	column;
}


#header > div{
	position: relative;
	flex: 0;
	display: flex;
	justify-content: center;  
	align-items: center; 
	padding: 6px 20px;
	flex-direction: row;
	width: 100%;
}

#header > div > .logo{
	position: relative;
	flex: 0;
}

#header > div > .logo > img{
	width: 200px;
}

#header > div > span{
	flex: 1;
}

#header > div .logininfo{
	position: relative;
	display: flex;
	background: transparent;
	padding: 6px 20px;
	text-align: right;
	font-size: 16px;
	line-height: 24px;
	justify-content: center;  
	align-items: center; 
	flex-direction: column;
	flex: 0;
}

#header > div .logininfo > i{
	font-size: 32px;
	line-height: 48px;
}

#header .up{
	cursor: pointer;
}

#header.userislogged > .up{
	background: #4080ff20;
}

#header > div > .location{
	flex: 1;
	text-align: left;
	padding: 10px 0px;
}

#header > div > .location > button{
	font-size: 32px;
	line-height: 40px;
	background: #333333;
	color: #a0a0a0;
	cursor: pointer;
	border-radius: 8px;
	margin: 0px 8px 8px 0px;
	padding: 0px 10px;
}

#header > div > .location > button:hover{
	background: #444444;
}

#header > div > .location > button.current{
	background: transparent;
	color: #f0f0f0;
	cursor: auto;
}


#header > div > .info{
	flex: 1;
	text-align: right;
	padding: 10px;
	font-size: 24px;
	line-height: 32px;
}



#header > div > .favorite{
	position: relative;
	flex: 0;
	text-align: right;
	padding: 10px;
	font-size: 40px;
	line-height: 40px;
	cursor: pointer;
	color: #ffffff30;
}

#header > div > .favorite:hover{
	color: pink;
}

#header > div > .favorite.loveit{
	color: #ff0000;
}


#main > div{
	width: 100%;
}

.welcome{
	position: relative;
	flex: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;  
	align-items: center; 
	font-size: 18px;
	line-height: 24px;
}

.welcome h1{
	font-size: 48px;
	line-height: 54px;
	font-family: 'exo_2bold',Arial;
	margin-bottom: 20px;
}

.welcome h1 > span{
	color: #4060ff;
}

.welcome h2{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
	margin-bottom: 10px;
}


.welcome p{
	text-align: center;
	margin: 8px 0px 8px 0px;
}

.welcome p > i{
	color: #4060ff;
	text-decoration: underline;
	cursor: pointer;
	font-style: normal;
}

.welcome > div{
	position: relative;
	flex: 0;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
}


.welcome .welcome-signin{
	position: relative;
	flex: 0;
	width: auto;
	font-size: 18px;
	line-height: 24px;
	margin-top: 32px;
	display: none;
}


.welcome .welcome-signup{
	position: relative;
	flex: 0;
	width: auto;
	font-size: 18px;
	line-height: 24px;
	margin-top: 32px;
	display: none;
}

.welcome .welcome-box{
	position: relative;
	padding: 20px 40px;
	background: #323232;
	height: auto;
	font-size: 24px;
	line-height: 32px;
	border-radius: 10px;
	text-align: left;
	width: 100%;
	margin: 30px auto 20px auto;
	max-width: 400px;
}

.welcome .welcome-box p{
	text-align: left;
}

.welcome .welcome-box div{
	text-align: right;
}


.welcome .welcome-box input{
	font-size: 20px;
	line-height: 40px;
	background: #a0a0a0;
	color: #000000;
	padding: 0px 10px;
	width: 100%;
	border-radius: 6px;
	margin-bottom: 6px;
	font-family: 'exo_2regular',Arial;
}

.welcome .welcome-box button{
	background: #888888;
	border-radius: 8px;
	padding: 6px 20px;
	font-size: 18px;
	line-height: 32px;
	cursor: pointer;
	margin: 20px auto 0px auto;
	font-family: 'exo_2bold',Arial;
	color: #222222;
}

.welcome .welcome-box button:hover{
	background: #4060ff;

}

.welcome .welcome-error{
	position: relative;
	display: none;
	color: #ff8080;
}

.welcome .welcome-error[data-error="-"]{
}

.welcome .welcome-error[data-error="0"]{
	color: #ffffff;
}

.welcome .welcome-buttons{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;  
	align-items: stretch; 
	margin-top: 20px;
}

.welcome .welcome-buttons > div{
	position: relative;
	padding: 10px 20px 10px 90px;
	margin: 10px;
	cursor: pointer;
	border-radius: 10px;
	border: 1px solid #999999;
}

.welcome .welcome-buttons > div:hover{
	background: #a0a0a0;
	color: #222222;
	border: 1px solid #ffffff;
}

.welcome .welcome-buttons > div > i{
	position: absolute;
	left: 40px;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 50px;
	line-height: 50px;
	color: #4060ff80;
}


.welcome .welcome-buttons > div:hover > i{
	color: #4060ff;
}

.welcome .welcome-buttons h3{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
	margin-bottom: 10px;
	text-align: left;
}


.welcome .welcome-buttons p{
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 10px;
	text-align: left;
}

.welcome .welcome-config-options{

}

.welcome .welcome-config-options label{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

.welcome .welcome-config-options input{
	display: inline-block;
	vertical-align: middle;
	font-size: 18px;
	line-height: 32px;
	padding: 0px 6px;
	color: #000000;
	background: #ffffff;
	width: 80px;
}

.menu-bottom{
	position: relative;
	flex: 0;
	display: flex;
	flex-direction: row;
	padding: 10px 0px 0px 0px;
	margin: 0px -10px;
}

.menu-bottom > div{
	padding: 0px 10px;
	flex: 0;
	white-space: nowrap;
}

.menu-bottom > p{
	flex: 1;
}

.menu-bottom > div > div{
	flex: 1;
	background: #000000;
	color: #ffffff;
	padding: 10px 20px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 24px;
	line-height: 32px;
}

.menu-bottom > div > div:hover{
	background: #888888;
}

.menu-bottom > div > div > span{
	margin-left: 20px;
}

.menu-bottom > div > div.unavailable{
	opacity: 0.5;
	cursor: auto;
	background: #000000;
}

.window-index{
	position: relative;
	background: #888888;
	flex: 1;
	overflow: auto;
	border-radius: 8px;
	text-align: center;
	display: none;
}


.item-menu{
	position: relative;
	padding: 4px;
	width: 25%;
	display: inline-block;
	vertical-align: middle;
}

.item-menu[data-type="favorites"]{
	width: 50%;
}

.item-menu[data-type="lessons"]{
	width: 50%;
}

.item-menu > div{
	position: relative;
	background: #000000;
	color: #ffffff;
	padding: 10px 10px;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
}

.item-menu > div:hover{
	background: #666666;
	color: #ffffff;
}

.item-menu > div > div{
	position: relative;
	flex: 1;
	text-align: left;
	padding: 10px 20px;
}

.item-menu > div > div:first-of-type{
	flex: 1;
	max-width: 200px;
}

.item-menu > div > div > img{
	display: block;
	width: 100%;
}

.item-menu h1{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
}

.item-menu h2{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
}





.item-favorite{
	position: relative;
	padding: 4px;
	width: 100%;
	display: inline-block;
	vertical-align: middle;
}


.item-favorite > div{
	position: relative;
	background: #000000;
	color: #ffffff;
	padding: 10px 10px;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
}

.item-favorite > div:hover{
	background: #666666;
	color: #ffffff;
}

.item-favorite > div > div{
	position: relative;
	flex: 1;
	text-align: left;
	padding: 10px 20px;
}

.item-favorite > div > div:first-of-type{
	flex: 1;
	max-width: 200px;
}

.item-favorite > div > div > img{
	display: block;
	width: 100%;
}

.item-favorite h1{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
}

.item-favorite h2{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
}






.item-lesson-module{
	position: relative;
	padding: 4px;
	width: 33.333%;
	display: inline-block;
	vertical-align: middle;
}


.item-lesson-module > div{
	position: relative;
	background: #000000;
	color: #ffffff;
	padding: 10px 10px;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
}

.item-lesson-module > div:hover{
	background: #666666;
	color: #ffffff;
}

.item-lesson-module > div > div{
	position: relative;
	flex: 1;
	text-align: left;
	padding: 10px 20px;
}

.item-lesson-module > div > div:first-of-type{
	flex: 1;
	max-width: 200px;
}

.item-lesson-module > div > div > img{
	display: block;
	width: 100%;
}

.item-lesson-module h1{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
}

.item-lesson-module h2{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
}





.item-lesson-class{
	position: relative;
	padding: 4px;
	width: 33.333%;
	display: inline-block;
	vertical-align: middle;
}


.item-lesson-class > div{
	position: relative;
	background: #000000;
	color: #ffffff;
	padding: 10px 10px;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
}

.item-lesson-class > div:hover{
	background: #666666;
	color: #ffffff;
}

.item-lesson-class > div > div{
	position: relative;
	flex: 1;
	text-align: left;
	padding: 10px 20px;
}

.item-lesson-class > div > div:first-of-type{
	flex: 1;
	max-width: 200px;
}

.item-lesson-class > div > div > img{
	display: block;
	width: 100%;
}

.item-lesson-class h1{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
}

.item-lesson-class h2{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
}



.item-lesson-exercise{
	position: relative;
	padding: 4px;
	width: 33.333%;
	display: inline-block;
	vertical-align: middle;
}


.item-lesson-exercise > div{
	position: relative;
	background: #000000;
	color: #ffffff;
	padding: 10px 10px;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
}

.item-lesson-exercise > div:hover{
	background: #666666;
	color: #ffffff;
}

.item-lesson-exercise > div > div{
	position: relative;
	flex: 1;
	text-align: left;
	padding: 10px 20px;
}

.item-lesson-exercise > div > div:first-of-type{
	flex: 1;
	max-width: 200px;
}

.item-lesson-exercise > div > div > img{
	display: block;
	width: 100%;
}

.item-lesson-exercise h1{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
}

.item-lesson-exercise h2{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
}



.item-author{
	position: relative;
	padding: 4px;
	width: 25%;
	display: inline-block;
	vertical-align: middle;
}


.item-author > div{
	position: relative;
	background: #000000;
	color: #ffffff;
	padding: 10px 30px;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
}

.item-author > div:hover{
	background: #666666;
	color: #ffffff;
}

.item-author > div > div{
	position: relative;
	flex: 1;
	text-align: left;
	padding: 10px 20px;
}

.item-author > div > div:first-of-type{
	flex: 1;
	max-width: 200px;
}

.item-author > div > div > img{
	display: block;
	width: 100%;
}

.item-author h1{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
}

.item-author h2{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
}


.item-author > div > i{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #ff0000;
	font-size: 32px;
	line-height: 32px;
}




.item-art{
	position: relative;
	padding: 4px;
	width: 100%;
	display: inline-block;
	vertical-align: middle;
}


.item-art > div{
	position: relative;
	background: #000000;
	color: #ffffff;
	padding: 10px 30px;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
}

.item-art > div:hover{
	background: #666666;
	color: #ffffff;
}

.item-art > div > div{
	position: relative;
	flex: 1;
	text-align: left;
	padding: 10px 20px;
}

.item-art > div > div:first-of-type{
	flex: 1;
	max-width: 200px;
}

.item-art > div > div > img{
	display: block;
	width: 100%;
}

.item-art h1{
	font-size: 32px;
	line-height: 40px;
	font-family: 'exo_2bold',Arial;
}

.item-art h2{
	font-size: 24px;
	line-height: 32px;
	font-family: 'exo_2bold',Arial;
}


.item-art > div > i{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #ff0000;
	font-size: 32px;
	line-height: 32px;
}



#osmd-container{
	position: relative;
	padding: 20px;
	height: auto;
	overflow: auto;
	padding: 10px 10px;
	background: #eeeeee;
	border-radius: 8px;
	flex: 1;
	display: none;
}


#osmd-container .flycursor{
	position: absolute;
	left: auto;
	top: 0px;
	bottom: 0px;
	width: auto;
	pointer-events: none;
	background: #ff00ff20;
	display: none;
}

#osmd-container .flycursor.looping{
	background: #ff00ff60;
}

#osmd-container .scorecursor{
	position: absolute;
	left: auto;
	top: 0px;
	bottom: 0px;
	width: auto;
	pointer-events: none;
	background: #ff00ff20;
	display: block;
}

#vkeyboard{
	position: relative;
	padding: 0px;
	flex: 0;
	display: none;
	padding: 10px 0px 0px 0px;
}

#vkeyboard > div{
	position: relative;
	/*height: 200px;*/
	aspect-ratio: 12;
}

#vkeyboard > div > .octave{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	width: calc(100% / 7);
}

#vkeyboard > div > .octave > .key{
	position: relative;
	transition: background 300ms ease;
}

#vkeyboard > div > .octave > .key.white{
	display: inline-block;
	vertical-align: middle;
	background: #f0f0f0;
	border: 1px solid #808080;
	border-radius: 2px 2px 8px 8px;
	height: 100%;
	width: calc(100% / 7);
}

#vkeyboard > div > .octave > .key.white > span{
	position: absolute;
	width: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: blue;
	left: 50%;
	bottom: 10%;
	transform: translate(-50%,-50%);
}

#vkeyboard > div > .octave > .key.black{
	position: absolute;
	background: #202020;
	border: 1px solid #808080;
	border-radius: 2px 2px 8px 8px;
	height: 60%;
	width: calc(100% / 10);
	top: 0px;
}

#vkeyboard > div > .octave > .key.black[data-okeyn="7"]{
	left: calc((1 * (100% / 7)) - ((100% / 10) * 0.7));
}

#vkeyboard > div > .octave > .key.black[data-okeyn="8"]{
	left: calc((2* (100% / 7)) - ((100% / 10) * 0.3));
}

#vkeyboard > div > .octave > .key.black[data-okeyn="9"]{
	left: calc((4 * (100% / 7)) - ((100% / 10) * 0.7));
}

#vkeyboard > div > .octave > .key.black[data-okeyn="10"]{
	left: calc((5 * (100% / 7)) - ((100% / 10) * 0.5));
}

#vkeyboard > div > .octave > .key.black[data-okeyn="11"]{
	left: calc((6 * (100% / 7)) - ((100% / 10) * 0.3));
}

.over-score{
	position: absolute;
	left: 0px;
	top: 0px;
	width: auto;
	height: auto;
	pointer-events: none;
}

.over-score > div{
	position: absolute;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	background: #ff000060;
	pointer-events: none;
	display: none;
}

.loading{
	position: fixed;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	background: #000000;
	display: block;
	opacity: 1;
	z-index: 1;
}

.loading > div{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20%;
	transform: translate(-50%,-50%);
	text-align: center;
}

.loading > div > img{
	display: block;
	margin: 0px auto;
	width: 100%;
	margin-bottom: 10px;
}

/* HTML: <div class="loader"></div> */
.loading > div > p{
	margin: 0px auto;
	width: 100%;
	aspect-ratio: 2.5;
	--_g: no-repeat radial-gradient(farthest-side,#ffffff 90%,transparent);
	background:var(--_g), var(--_g), var(--_g), var(--_g);
	background-size: 20% 50%;
	animation: l43 1s infinite linear; 
  }
  @keyframes l43 {
	0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
	16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
	33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
	50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
	66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
	83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
	100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  }


.popup-message{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #000000d0;
	flex-direction: column;
	justify-content: center;  
	align-items: center; 
	text-align: center;
	font-size: 24px;
	line-height: 32px;
	display: none;
}

.popup-message > div{
	position: relative;
	background: #666666;
	border: #888888;
	padding: 20px;
	border-radius: 10px;
	width: 50%;
	min-width: 300px;
	margin: 0px auto;
}

.popup-message > div > h1{
	font-size: 32px;
	line-height: 42px;
	font-family: 'exo_2bold',Arial;
	margin-bottom: 20px;
}


.popup-message > div > div{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;  
	margin: 10px 0px 10px 0px;
}

.popup-message > div > div > button{
	padding: 10px 20px;
	cursor: pointer;
	margin: 10px 10px 0px 10px;
	font-size: 18px;
	line-height: 32px;
	font-family: 'exo_2regular',Arial;
	border-radius: 8px;
	background: #222222;
	color: #f0f0f0;
	min-width: 100px;
}

.popup-message > div > div > button:hover{
	background: #444444;
}

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

	.loading > div{ width: 50%; }


	

	.menu-bottom > div > div > span{ display: none; }

}


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

	.menu-bottom > div{	padding: 0px 5px;}
	.menu-bottom > div > div{ padding: 10px 10px; font-size: 20px; line-height: 32px; }
	.menu-bottom > div > div > span{ margin-left: 10px;	}

}

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

	.loading > div{ width: 40%; }

}

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

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

	.loading > div{ width: 30%; }

}

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

	.loading > div{ width: 20%; }

}

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

	
	.menu-bottom > div > div > span{ display: inline; }
	.loading > div{ width: 18%; }
}

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

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

	.loading > div{ width: 16%; }
}

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

	.loading > div{ width: 15%; }



	.menu-bottom > div{	padding: 0px 10px;}
	.menu-bottom > div > div{ padding: 10px 20px; font-size: 24px; line-height: 32px; }
	.menu-bottom > div > div > span{ margin-left: 20px;	}
	
}

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


}

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

	
}


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

	
}

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

	
}