@font-face {
    font-family: Consolas;
    src: url(../font/consola.ttf);
}

*{
	margin: 0;
	padding: 0;
}
body{
	margin: 0;
	padding: 0;
}
body::-webkit-scrollbar-track, 
.scroller_box::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}
body::-webkit-scrollbar, 
.scroller_box::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb, 
.scroller_box::-webkit-scrollbar-thumb {
	background-color: #a4a3a3;
	border-radius: 10px;
}
div {
	display: block;
}
a {
	text-decoration: none;
}
.clear {
	clear: both;
}
.text {
	text-align: center;
	font-family: Arial;
	font-weight: 700;
}
#main {
	width: 100%;
	height: 100%;
}
#main .fb-like {
	position: fixed;
	right: 5px;
	bottom: 40px;
	z-index: 100;
}
.select-none{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #4990f9;
  width: 70px;
  height: 70px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*********Tabs*********/
#scrollView {
	margin: 70px auto;
	position: relative;
	z-index: 1;
}
#scrollView .loader {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -35px;
	margin-top: -35px;
}
#score {
	margin: 0 auto;
}
#score header {
	padding: 20px;
}
#score #name_music {
	font-weight: 500;
	font-size: 38px;
	fill: #535353;
	opacity: 0;
}
#tabs .strings, .line_frame {
	stroke: #a4a3a3;
	stroke-width: 1;
	stroke-linecap: square;
	fill: none;
	vector-effect: non-scaling-stroke;
}
#tabs .line_frame_repeat {
	stroke-width: 5;
	stroke-linecap: butt;
	stroke: #535353;
}
#tabs .dot_repeat {
	fill: #535353;
}
#tabs .text_note {
	font-size: 17px;
	fill: #535353;
	text-anchor: middle;
	dominant-baseline: central;
	z-index: 1;
}
#tabs .rect_note {
	fill: white;
}
#tabs .numFrame {
	font-weight: 400;
	font-size: 12px;
	fill: #4990f9;
}
#tabs .curve {
	stroke: #535353;
	stroke-width: 1px;
	fill: #535353;
}
#tabs .line_curve {
	stroke-width: 2px;
}
#tabs .text_tab {
	font-size: 24px;
	fill: #535353;
	text-anchor: middle;
	dominant-baseline: central;
}
/*Cursor*/
#tabs #CursorShape-Body {
	fill: #4990f9;
	fill-opacity: 0.8;
}
#tabs #boxCursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
/*Group repeat*/
#tabs #group_repeat .line_repeat, #tabs #group_repeat .circle_repeat {
	fill: #0ade00;
	opacity: 0.7;
}
#tabs #group_repeat .path_repeat{
	stroke: #ffffff;
	stroke-width: 4;
	fill: none;
}
#tabs #area_repeat .bg_area {
	opacity: 0.1;
}
#tabs #group_repeat .rect_repeat{
	opacity: 0;
}
/*Group effect count play*/
.content-tabs #scrollView #ef_countplay {
	position: fixed;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    margin-top: -90px; 
    margin-left: -90px;
	display: table;
}
.content-tabs #scrollView #ef_countplay  svg {
	position: absolute;
}
.content-tabs #scrollView #ef_countplay  svg circle {
	fill: #0fcb0f;
	filter:url(#dropshadow);
}
.content-tabs #scrollView #ef_countplay span.numcount {
	font-size: 90px;
	font-weight: 500;
	display: table-cell;
	vertical-align: middle;
	color: #ffffff;
	position: relative;
}
/*Group speed*/
.content-tabs #groupSpeed {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
	margin: 0 auto;
	background-color: #ffffff;
	border-top: 2px solid #4990f9;
	box-shadow: rgba(0,0,0,0.5) 0px -2px 3px, inset rgba(255,255,255,0.2) 0px -1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px -2px 3px, inset rgba(255,255,255,0.2) 0px -1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px -2px 3px, inset rgba(255,255,255,0.2) 0px -1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	display: table;
	z-index: 9;
}
.content-tabs #groupSpeed .percent {
	flex-grow: 1;
	font-size: 30px;
	display: table-cell;
	vertical-align: middle;
	color: #4990f9;
}
/********Nav bottom***********/
#navBottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 70px;
	margin: 0 auto;
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	background-color: #ffffff;
	border-top: 2px solid #4990f9;
	box-shadow: rgba(0,0,0,0.5) 0px -2px 3px, inset rgba(255,255,255,0.2) 0px -1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px -2px 3px, inset rgba(255,255,255,0.2) 0px -1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px -2px 3px, inset rgba(255,255,255,0.2) 0px -1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	z-index: 10;
}
#navBottom .button_item .content_button .selected {
	position: absolute;
	background-color: #4990f9;
	width: 80px;
	height: 7px;
	bottom: 0;
	margin: 0 10px;
	opacity: 0;
}
#navBottom .button_item .content_button .text{
	font-size: 22px;
	color: #4990f9;
}
#navBottom #btnCountPlay #count_play {
	position: absolute;
	font-size: 22px;
	font-weight: 600;
	top: 2px;
	color: #4990f9;
	opacity: 0;
}
#navBottom .groupOption {
	position: relative;
}
#navBottom #groupOption {
	position: absolute;
	bottom: 60px;
	right: 0;
	width: 330px;
	overflow: hidden;
	min-height: 60px;
	background-color: #ffffff;
	box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	visibility: hidden;
	opacity: 0;
	transform-origin: right bottom;
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	transform: scale(0.5,0.5);
	-webkit-transform: scale(0.5,0.5);
	-moz-transform: scale(0.5,0.5);
	-ms-transform: scale(0.5,0.5);
	-o-transform: scale(0.5,0.5);
	transition: visibility 0.15s, opacity 0.15s linear, transform .15s linear, -webkit-transform .15s linear, -moz-transform .15s linear;
	-webkit-transition: visibility 0.15s, opacity 0.15s linear, transform .15s linear, -webkit-transform .15s linear, -moz-transform .15s linear;
	-moz-transition: visibility 0.15s, opacity 0.15s linear, transform .15s linear, -webkit-transform .15s linear, -moz-transform .15s linear;
}
#navBottom #groupOption.active {
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-ms-transform: scale(1,1);
	-o-transform: scale(1,1);
}
#navBottom #groupOption .button_item {
	width: 100%;
	height: 100%;
	padding: 20px 0;
	display: table;
}
#navBottom #groupOption .button_item .content_button {
	padding: 0 10px;
}
#navBottom #groupOption .button_item .content_button div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 100%;
	padding: 0 10px;
}
#navBottom #groupOption .content_button .icon-shape img {
	height: 42px;
}
#navBottom #groupOption .name {
	font-size: 32px;
	color: #4990f9;
	white-space: nowrap;
}
/*********Nav top*******/
#navTop {
	display: flex;
	display: -webkit-flex;
	position: fixed;
	top: 0;
	width: 100%;
	height: 70px;
	margin: 0 auto;
	background-color: #ffffff;
	border-bottom: 2px solid #4990f9;
	box-shadow: rgba(0,0,0,0.5) 0px 2px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	z-index: 10;
}
#navTop #groupButtonTypeDan {
	margin: 0 auto;
	width: 400px;
	position: relative;
}
#navTop #btnTypeDan {
	justify-content: center;
	display: flex;
	display: -webkit-flex;
	width: 100%;
}
#navTop #btnTypeDan .content_button {
	height: 100%;
	padding: 0 10px;
	display: table;
	text-align: center;
	vertical-align: middle;
}
#navTop #btnTypeDan .content_button div,
#navTop #btnTypeDan .content_button h2 {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 100%;
	padding: 0 10px;
}
#navTop #groupButtonTypeDan .name_typedan {
	font-size: 32px;
	color: #4990f9;
	white-space: nowrap;
}
#navTop #btnTypeDan #icon_arrow {
	-ms-transform: scale(1,-1);
	-webkit-transform: scale(1,-1);
	transform: scale(1,-1);
}
#navTop #btnTypeDan #icon_arrow .icon{
	fill: #4990f9;
	width: 24px;
	height: 15px;
	display: none;
}
#navTop #btnTypeDan #icon_typedan img, #navTop #btnTypeDan #icon_arrow img  {
	display: none;
}
.button_fixed {
	position: absolute;
}
#navTop #btnFavorites {
	left: 100px;
	z-index: 1;
}
#navTop #btnFavorites .icon-shape {
	background-image: url(../images/favorites.png);
	background-size: auto 85%;
	background-repeat: no-repeat;
	background-position: 50%;
}
#navTop .selected#btnFavorites .icon-shape {
	background-image: url(../images/favorites_selected.png);
}
#navTop #btnChord,
#navTop #btnTab {
	right: 0px;
}
#navTop #groupTypeDan {
	position: absolute;
	top: 70px;
	left: 0;
	width: 400px;
	opacity: 0;
}
#navTop #groupTypeDan .scroll_box {
	width: 100%;
	margin: 0 auto;
	background-color: #ffffff;
	box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
}
#navTop #groupTypeDan .button_item {
	width: 100%;
	height: 100%;
	padding: 20px 0;
	display: table;
}
#navTop #groupTypeDan .button_item .content_button {
	padding: 0 10px;
}
#navTop #groupTypeDan .button_item .content_button div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 100%;
	padding: 0 10px;
}
#navTop #groupButtonTypeDan .content_button .icon-shape img {
	height: 42px;
}
/********Box left*******/
.box-left .box {
	position: fixed;
	max-width: 600px;
	width: 90%;
	height: 100%;
	left: -610px;
	bottom: 0;
	background-color: #ffffff;
	box-shadow: rgba(0,0,0,0.3) 2px 0px 6px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.3) 2px 0px 6px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.3) 2px 0px 6px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	z-index: 200;
	display: none;
}
.overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #646464;
	opacity: 0;
	pointer-events: none;
	transition: .4s ease;
	will-change: opacity;
	z-index: 199;
	cursor: default;
}
.overlay_active {
	pointer-events: auto;
	opacity: 0.15;
}
.box-left .scroll_box {
	width: 100%;
	overflow-y: auto;
	counter-reset: section;
}
.box-left .scroll_box .scroller {
	margin-bottom: 20px;	
}
.box-left .header h3 {
    font-weight: 500;
    margin-bottom: 15px;
    font-size: 30px;
}	
/*Panel popuplar, seach*/
#panel_popuplar .box {
	display: block;
	left: 0;
}
#panel_popuplar .header,
#panel_favorites .header {
	margin: 20px 20px;
}
#panel_popuplar .search {
	background-color: #e5e5e5;
	width: 100%;
	display: flex;
	display: -webkit-flex;
}
#panel_popuplar .search .icon-shape {
	width: 24px;
	margin-left: 1.8%;
}
#panel_popuplar .search  #delete_keysearch {
	margin-left: 0;
	margin-right: 1.8%;
	display: none;
}
#panel_popuplar .search .icon-shape svg {
	padding-top: 11px;
	display: block;
	position: absolute;
}
#panel_popuplar .search .icon-shape svg.icon_loader {
	display: none;
}
#panel_popuplar .search #search_field {
	padding: 10px 5px;
	font-size: 22px;
	font-family: Arial;
	width: 90%;
	margin-left: 5px;
	border: 0;
	background: none;
}
#panel_popuplar .search #search_field:focus {
	outline: 0;
}
.box-left .scroller .no_tabs {
	text-align: center;
	font-size: 30px;
	font-weight: 500;
	color: #a4a3a3;
	margin-top: 40px;
}
.no_favorites {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	text-align: center;
}
.no_favorites .middle {
	display: table-cell;
	vertical-align: middle;
	
}
.no_favorites .no_favorites_header {
	font-weight: 500;
	font-size: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.no_favorites .no_favorites_hint {
	font-weight: 500;
	font-size: 20px;
}
.no_favorites .button-signinsync {
	margin-top: 25px;
	background-color: #4990f9;
	border: none;
	outline: none;
	padding: 10px 20px;
	color: #fff;
	font-weight: 400;
	font-size: 20px;
}
#panel_favorites .header {
	border-bottom: 1px solid #ccc;
}
#panel_favorites .box {
	display: block;
	left: 0;
}
/*Box menu*/
#boxMenu .header {
	width: 100%;
	height: 70px;
	background-color: #4990f9;
	box-shadow: rgba(0,0,0,0.5) 0px 2px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	display: table;
	margin-bottom: 3px;
}
#boxMenu .header h3 {
	display: table-cell;
	vertical-align: middle;
	font-size: 30px;
	color: #ffffff;
}
#boxMenu .scroller ul {
	list-style: none;
}
#boxMenu .scroller ul li {
	border-bottom: 1px solid #a4a3a3;
}
#boxMenu .scroller ul li ul {
	border-top: 1px solid #a4a3a3;
}
#boxMenu .scroller ul li:last-child {
	border-bottom: none;
}
#boxMenu .item {
	position: relative;
	display: block;
	padding: 20px 20px;
	text-align: left;
	color: #000000;
	width: auto;
}
#boxMenu .item .content {
	position: relative;
	overflow: hidden;
}
#boxMenu .has-submenu .content {
	padding-right: 20px;
}
#boxMenu .item .name {
	font-weight: 400;
	text-align: left;
	font-size: 27px;
}
#boxMenu .item .description {
	text-align: left;
	color: #a4a3a3;
	font-size: 20px;
	font-weight: 300;
	margin-top: 5px;
}
#boxMenu .item .icon{
	float: left;
	margin-right: 30px;
	margin-top: -2px;
	width: 50px;
	height: 64px;
	overflow: hidden;
	display: table;
}
#boxMenu .item .icon div {
	display: table-cell;
	vertical-align: middle;
}
#boxMenu .item .icon img,
#boxMenu .item .icon svg {
	max-width: 100%;
	width: 100%;
	fill: #4990f9;
	text-align: center;
}
#boxMenu .item .icon svg {
	width: 50px;
	height: 50px;
}
#boxMenu .scroller ul li ul {
	display: none;
}
#boxMenu .scroller ul li .arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	display: inline-flex;
	transition: .2s ease;
	opacity: 0;
}
#boxMenu .scroller ul li .arrow.has-submenu {
	opacity: 1;
}
#boxMenu .scroller ul li .arrow svg {
	width: 14px;
	fill: none;
	stroke: #a4a3a3;
	stroke-width: 2px;
}
#boxMenu .scroller ul li ul .item {
	padding-left: 50px;
}
#boxMenu .scroller ul li ul .item .icon {
	width: 80px;
	height: 50px;
	margin-right: 20px;
}
#boxMenu .scroller ul li ul .item .icon img {
	max-height: 100%;
}
#boxMenu .scroller ul li ul .item .name {
	font-size: 20px;
}
#boxMenu .scroller ul li ul .item .description {
	font-size: 15px;
}

/*Item song*/
#main .item_song {
	position: relative;
	display: block;
	padding: 10px 20px;
	text-align: left;
	color: #000000;
	border-bottom: 1px solid #a4a3a3;
}
#main .item_song:last-child {
	border-bottom: none;
}
#main .item_song:before {
	position: absolute;
	counter-increment: section;
	content: counter(section) ". ";
	font-weight: 300;
	font-size: 16px;
	text-align: left;
	padding-top: 3px;
}
#main .item_song .content {
	padding-left: 40px;
}
#main .item_song .name {
	font-weight: 400;
	font-size: 20px;
	text-align: left;
	color: #000000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#main .item_song .songer {
	font-weight: 300;
	font-size: 16px;
	text-align: left;
	color: #a4a3a3;
	margin-top: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#main .item_song .icon {
	position: absolute;
	right: 7px;
	bottom: 7px;
	opacity: 0.5;
}
#main .item_song .icon img {
	height: 18px;
}




/*********group get it**********/
#group_getit {
	position: absolute;
	right: 10px;
	height: 100%;
}
#group_getit .content {
	height: 100%;
	display: table;
}
#group_getit .content .text_getit,
#group_getit .content .icon {
	display: table-cell;
	vertical-align: middle;
}
#group_getit .content .icon a {
	padding: 0 5px;
}
#group_getit .content .icon img {
	height: 45px;
}
#group_getit .content .text_getit {
	font-size: 20px;
	color: #a4a3a3;
	padding-right: 10px;
}
/***************Footer*****************/
#footer .version {
	position: fixed;
	right: 10px;
	bottom: 10px;
	font-size: 16px;
	font-family: Arial;
	color: #a4a3a3;
	z-index: 100;
}
/************List songs*****************/
#main .songs {
	counter-reset: section;
}
#main .songs .list-contents {
	position: relative;
	z-index: 1px;
}
#main .songs .pagination {
	width: 100%;
	margin: 50px 0;
}
#main .songs .pagination .paging {
	width: auto;
	margin: 0 auto;
	display: table;
}
#main .songs .pagination .paging .pagingNav a,
#main .songs .pagination .paging .pagingNav span {
	padding: 6px 10px;
	border: 1px solid #c0c2c3;
	height: 60px;
	font-family: arial;
	color: #414141;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow: #fff 0px 1px 0px;
	margin: 0 4px;
	background-color: #f4f4f4;
}
#main .songs .pagination .paging .pagingNav .disabled {
	background-color: #DBDADB;
}
#main .songs .pagination .paging .pagingNav .active {
	background-color: #4990f9;
	color: #ffffff;
}
/***********button item**********/
.button_item {
	width: 100px;
	height: 100%;
	display: table;
}
.button_item .content_button {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 100%;
}
.button_item .content_button .icon-shape,
.button_item .content_button .icon-shape img {
	position: relative;
	height: 50px;
	vertical-align: middle;
}
.button_item .content_button .text {
	cursor: default;
}
.button_item .content_button svg.icon-shape {
	width: 100px;
	fill: #4990f9;
}

/*************Chords*****************/
.content-chords  #score #name_music {
	opacity: 1;
}
.content-chords  #chords {
	padding: 30px;
	white-space: pre;
}
.content-chords  #chords p {
	font-family: Consolas;
	font-style: normal;
	font-variant: normal;
	line-height: 30px;
	font-size: 26px;
}
.content-chords  #chords .chord_lyric {
	margin-bottom: 30px;
}
.content-chords  #chords p .chord-item {
	color: #4990f9;
}
.content-chords #scrollView {
	overflow: auto;
	min-height: 0px;
	position: relative;
	height: 650px;
}
.content-chords #navTop .title_chord {
	margin: 0 auto;
	display: table;
	height: 100%;
}
.content-chords #navTop  .title_chord h2 {
	display: table-cell;
	vertical-align: middle;
	font-size: 32px;
	color: #4990f9;
}
.content-chords #box_chords {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 200px;
	left: 200px;
	display: none;
}
.content-chords #box_chords img {
	position: absolute;
}
.content-chords #box_chords .frame {
	width: 100%;
}
.content-chords #box_chords .icon_top,
.content-chords #box_chords .icon_bottom {
	width: 30%;
}
.content-chords #box_chords .icon_top {
	top: -17px;
	left: 70px;
	opacity: 0;
}
.content-chords #box_chords .icon_bottom {
	bottom: -13px;
	left: 70px;
}
.content-chords #box_chords .title {
	display: table;
	position: relative;
	text-align: center;
	margin-top: 4px;
	width: 100%;
	color: #ffffff;
	font-family: Arial;
	font-size: 24px;
}	
.content-chords #box_chords #data_chord {
	position: relative;
}
.content-chords #box_chords #data_chord svg rect {
	fill: #000000;
}
.content-chords #box_chords #data_chord svg text {
	font-family: Consolas;
	font-size: 17px;
}
.content-chords #box_chords #data_chord svg text.num_hand {
	fill: #ffffff;
	font-size: 12px;
}
.content-chords #box_chords .button {
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	position: absolute;
	bottom: 10px;
	width: 100%;
}
.content-chords #box_chords .button div {
	display: table;
}
.content-chords #box_chords .button svg {
	margin-top: 5px;
}
.content-chords #box_chords .button svg path {
	stroke: #000000;
	stroke-width: 2px;
	fill: none;
}
.content-chords #box_chords .button span {
	font-family: Arial;
	font-size: 18px;
	padding: 0 15px;
	display: table-cell;
	vertical-align: middle;
}
.content-chords #box_chords .button_close {
	font-family: Consolas;
	font-size: 25px;
	position: absolute;
	right: 8px;
	top: 1px;
	color: #ffffff;
}
.content-chords #navBottom {
	display: table;
}
.content-chords #navBottom .group-change-tone {
	display:table-cell;
	vertical-align: middle;
	width: 240px;
	height: 100%;
	padding: 0 30px;
}
.content-chords #navBottom .group-change-tone .frame {
	width: 100%;
	height: 45px;
	text-align: center;
	border: 1px solid #a4a3a3;
	display: flex;
	display: -webkit-flex;
	border-radius: 10px;
	overflow: hidden;
}
.content-chords #navBottom .group-change-tone .frame div {
	display: table;
	height: 100%;
}
.content-chords #navBottom .group-change-tone .frame div span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.content-chords #navBottom .group-change-tone .frame .text{
	width: 50%;
	font-size: 28px;
}
.content-chords #navBottom .group-change-tone .frame .button {
	width: 25%;
	height: 100%;
	font-family: Consolas;
	font-size: 36px;
	background-color: #4990f9;
	color: #ffffff;
}
.content-chords #panel_popuplar .box {
	display: none;
	left: -610px;
}
.content-chords .change-speed-scroll {
	position: fixed;
	right: 30px;
	top: 90px;
	z-index: 100;
	display: none;
}
.content-chords .change-speed-scroll #num-speed-scroll {
	color: #4990f9;
	font-size: 40px;
	margin: 5px 0;
	font-weight: 300;
	text-align: center
}
.content-chords .change-speed-scroll .button_item {
	width: auto;
}
.content-chords .change-speed-scroll svg {
   width: 36px;
   fill: #4990f9;
}
.content-chords .change-speed-scroll #button-increase{
	transform: rotate(180deg);
}

/***********Banner download**********/
#banner-download {
	position: fixed;
	bottom: 75px;
	display: none;
	justify-content: space-around;
	width: 100%;
	z-index: 150;
}
#banner-download img.banner {
	height: 70px;
	
}
#banner-download .content {
	position: relative;
}
#banner-download .close {
	position: absolute;
	right: 5px;
	top: 5px;
	font-family: Arial;
	font-size: 25px;
	color: #ffffff;
	background-color: #a4a3a3;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 15px;
}

/*Box activity*/
.box-activity {
	width: 90%;
	max-width: 400px;
	min-height: 200px;
	height: calc(100% - 225px);
	position: fixed;
	right: 10px;
	bottom: 145px;
	-webkit-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
	box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #ffffff;
	z-index: 140;
	visibility: hidden;
	opacity: 0;
	transform-origin: right bottom;
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	transform: scale(1,0.98);
	-webkit-transform: scale(1,0.98);
	-moz-transform: scale(1,0.98);
	-ms-transform: scale(1,0.98);
	-o-transform: scale(1,0.98);
	transition: visibility 0.15s, opacity 0.15s linear, transform .15s linear, -webkit-transform .15s linear, -moz-transform .15s linear;
	-webkit-transition: visibility 0.15s, opacity 0.15s linear, transform .15s linear, -webkit-transform .15s linear, -moz-transform .15s linear;
	-moz-transition: visibility 0.15s, opacity 0.15s linear, transform .15s linear, -webkit-transform .15s linear, -moz-transform .15s linear;
}
.box-activity.active {
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-ms-transform: scale(1,1);
	-o-transform: scale(1,1);
}
.box-activity .box {
	position: relative;
	width: 100%;
	height: 100%;
}
.box-activity .header {
	background-color: #4990f9;
	width: 100%;
	height: 70px;
	position: relative;
}
.box-activity .scroll_box {
	width: 100%;
	height: calc(100% - 70px - 50px);
	overflow-y: auto;
	position: relative;
}
.box-activity .input {
	width: 100%;
	min-height: 50px;
	max-height: 150px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.box-activity .input textarea {
	box-sizing: border-box;
	resize: none;
	width: 100%;
	height: 100%;
	border: none;
	font-family: Arial;
	font-size: 17px;
	padding: 15px;
	padding-right: 50px;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-weight: 400;
	display: block;
	background-color: #f4f7f9;
}
.box-activity .input textarea:focus {
	-webkit-box-shadow: 0 0 100px 0 rgba(150,165,190,.24);
	box-shadow: 0 0 100px 0 rgba(150,165,190,.24);
	outline: none;
	background-color: #ffffff;
}
.box-activity .input textarea.has-loginfb {
	padding-left: 45px;
}
.box-activity .input .buttons {
	position: absolute;
	right: 13px;
	top: 0;
	height: 50px;
	display: table;
}
.box-activity .input .button-send {
	width: 30px;
	height: 100%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.box-activity .input .button-send svg {
	width: 25px;
	height: 25px;
	fill: #c3cdd4;
	stroke: none;
	opacity: 0.8;
}
.box-activity .input .button-send.focus svg {
	fill: #4990f9;
}
.box-activity .input .avatar-me {
	width: 30px;
	height: 30px;
	float: left;
	position: absolute;
	left: 5px;
	top: 10px;
}
.box-activity .input .avatar-me img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.box-activity .scroller .item {
	padding-top: 15px;
	display: block;
}
.box-activity .scroller .item .avatar {
	float: left;
	width: 50px;
	height: 50px;
	margin-left: 10px;
	margin-right: 15px;
}
.box-activity .scroller .item .avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-image: url(../images/no_avatar.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.box-activity .scroller .item .content {
	position: relative;
	overflow: hidden;
	padding-right: 10px;
	padding-bottom: 10px;
}
#main .box-activity .scroller .item .name {
	text-align: left;
	color: #3568cb;
	font-size: 18px;
}
#main .box-activity .scroller .item .likes_comments,
#main .box-activity .scroller .item .date,
#main .box-activity .scroller .item .contents {
	text-align: left;
	font-weight: 400;
	color: #000000;
	margin-top: 5px;
	font-size: 17px;
}
#main .box-activity .scroller .item .contents a {
	color: #3568cb;
}
#main .box-activity .scroller .item .date {
	color: #a4a3a3;
	font-size: 15px;
}
#main .box-activity .scroller .item .likes_comments {
	color: #000000;
	font-size: 15px;
}
#main .box-activity .scroller .item .likes_comments pre {
	font-family: Arial;
}
#main .box-activity .scroller .item .likes_comments span {
	color: #3568cb;
}
.activity .notification {
	position: absolute;
	right: 10px;
	top: 0;
	width: 20px;
	height: 20px;
	background-color: #ff0000;
	border-radius: 50%;
	font-weight: 300;
	color: #ffffff;
	text-align: center;
	line-height: 20px; 
	font-size: 12px;
}
.box-activity  .comments {
	display: none;
}
.box-activity .header .topics,
.box-activity .header .comments {
	position: absolute;
	width: 100%;
	height: 100%;
}
.box-activity .header .content {
	display: table;
	width: 100%;
	height: 100%;
}
.box-activity .header .content .title {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 25px;
	color: #ffffff;
}
.box-activity .header .content .button_item {
	position: absolute;
	width: 70px;
}
.box-activity .header .content .button_item div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.box-activity .header .content .button_item svg {
	width: 12px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 3px;
}
.box-activity .scroller .icon-loading {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -15px;
	margin-top: -15px;
	border-width: 4px;
	width: 30px;
	height: 30px;
}
.box-activity .scroller .topics .item .content-row,
.box-activity .scroller .comments .item:first-child .content-row,
.box-activity .scroller .comments .item .content {
	border-bottom: 1px solid #a4a3a3;
}
.box-activity .scroller .comments .item:first-child {
	background-color: #f4f7f9;
}
.box-activity .scroller .comments .item:first-child .content {
	border-bottom: none;
}
.activity .button-activity {
	display: table;
	width: 60px;
	height: 60px;
	background-color: #4990f9;
	position: fixed;
	right: 15px;
	bottom: 80px;
	z-index: 139;
	border-radius: 50%;
	box-shadow: rgba(0,0,0,0.5) 0px 2px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
}
.activity .button-activity .icon {
	transition: transform .16s linear,-webkit-transform .16s linear,-moz-transform .16s linear,opacity .08s linear;
	-webkit-transition: transform .16s linear,-webkit-transform .16s linear,-moz-transform .16s linear,opacity .08s linear;
	-moz-transition: transform .16s linear,-webkit-transform .16s linear,-moz-transform .16s linear,opacity .08s linear;
}
.activity .button-activity .icon-chat {
	background-image: url(../images/iconchat.png);
	background-size: 32px 36px;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 1;
	transform: rotate(0deg) scale(1);
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	-o-transform: rotate(0deg) scale(1);
}
.activity .button-activity .icon-close {
	background-image: url(../images/iconclose.png);
	background-size: 15px 15px;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
}
.activity .button-activity.active .icon-close {
	opacity: 1;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}
.activity .button-activity.active .icon-chat {
	opacity: 0;
	transform: rotate(30deg) scale(0);
	-webkit-transform: rotate(30deg) scale(0);
	-moz-transform: rotate(30deg) scale(0);
	-ms-transform: rotate(30deg) scale(0);
	-o-transform: rotate(30deg) scale(0);
}
.activity .box-activity .button-like {
	width: 24px;
	height: 20px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	background-image: url(../images/btndislike.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #000000;
}
.activity .box-activity .button-like.active {
	background-image: url(../images/btnlike.png);
}
.activity .button-activity .notification {
    right: -2px;
    top: -2px;
	display: none;
}
.activity .overlay_active {
	opacity: 0.01;
	z-index: 138;
}

/************Content list chords******************/
.content-listchords #navTop {
	height: 120px;
	background-color: #4990f9;
	border-bottom: none;
}
.content-listchords #navTop .button_item {
	height: 70px;
}
.content-listchords #navTop #groupButtonTypeDan #btnTypeDan .name_typedan,
.content-listchords #groupButtonTypeChord #btnTypeChord .name_typechord {
	color: #ffffff;
}
.content-listchords #navTop #btnTypeDan #icon_arrow .icon,
.content-listchords #navTop .button_item .content_button svg.icon-shape {
	fill: #ffffff;
}
.content-listchords #navTop #btnTypeDan #icon_arrow .icon,
.content-listchords #navTop #btnTypeDan #icon_typedan img {
	display: block;
}
.content-listchords #navTop #groupButtonTypeDan {
	position: absolute;
	right: 0;
	display: none;
}
.content-listchords #navTop #btnTypeDan {
	justify-content: flex-end;
}
.content-listchords #navTop #groupTypeDan {
	left: -3px;
}
.content-listchords #groupButtonTypeChord {
	position: absolute;
	left: 100px;
	width: 200px;
}
.content-listchords #groupButtonTypeChord #btnTypeChord {
	display: flex;
	display: -webkit-flex;
	width: 100%;
	justify-content: center;
}
.content-listchords #groupButtonTypeChord #btnTypeChord .content_button {
	height: 100%;
    padding: 0 10px;
    display: table;
    text-align: center;
    vertical-align: middle;
}
.content-listchords #groupButtonTypeChord #btnTypeChord .content_button div, 
.content-listchords #groupButtonTypeChord #btnTypeChord .content_button h2 {
	display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    padding: 0 10px;
}
.content-listchords #groupButtonTypeChord .name_typechord {
	font-size: 32px;
    color: #4990f9;
    white-space: nowrap;
}
.content-listchords #groupButtonTypeChord #btnTypeChord #icon_arrow .icon {
	fill: #ffffff;
    width: 24px;
    height: 15px;
}
.content-listchords #groupButtonTypeChord #btnTypeChord #icon_arrow {
	-ms-transform: scale(1,-1);
    -webkit-transform: scale(1,-1);
    transform: scale(1,-1);
}
.content-listchords #navTop #groupTypeChord {
	position: absolute;
    top: 70px;
    left: 0;
    width: 200px;
    opacity: 0;
	display: none;
}
.content-listchords #navTop #groupTypeChord .scroll_box {
	width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 0px 10px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
}
.content-listchords #navTop #groupTypeChord .button_item {
	width: 100%;
    height: 100%;
    padding: 20px 0;
    display: table;
}
.content-listchords #scrollView {
	margin-top: 120px;
	margin-bottom: 50px;
}
.content-listchords #navTop #tab {
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
}
.content-listchords #navTop #tab .item_tab {
	width: 50%;
	height: 100%;
	float: left;
	display: table;
	color: #ffffff;
}
.content-listchords #navTop #tab .item_tab .label {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 25px;
	color: #ffffffcc;
}
.content-listchords #navTop #tab .item_tab.active,
.content-listchords #navTop #tab .item_tab.active .label {
	color: #ffffff;
}
.content-listchords #navTop #tab #line_selected {
	width: 40%;
	height: 4px;
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
	transition: left 0.16s;
}
.content-listchords #navTop #tab .basic#line_selected {
	left: calc(25% - 20%);
}
.content-listchords #navTop #tab .advanced#line_selected {
	left: calc(75% - 20%);
}
.content-listchords #score .item_chord {
	width: 33%;
	height: 190px;
	float: left;
	margin-top: 20px;
}
.content-listchords #score .item_chord .content_item {
	margin-left: 20px;
	height: 100%;
	clear: both;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 0px 30px rgba(0,0,0,.3)!important;
	-webkit-box-shadow: 0px 0px 30px rgba(0,0,0,.3)!important;
	position: relative;
}
.content-listchords #score .item_chord .title_chord {
	background-color: #4990f9;
	padding: 5px 20px;
}
.content-listchords #score .item_chord .title_chord .name_chord {
	color: #ffffff;
	text-align: left;
	font-size: 22px;
}
.content-listchords #score .item_chord svg text.num_hand {
	fill: #ffffff;
    font-size: 12px;
}
.content-listchords #score .item_chord svg.svgBoxChords .active {
	fill: #4990f9;
	
}
.content-listchords #score .item_chord .change_tone {
	position: absolute;
	right: 40px;
	top: calc(50% - 35px);
}
.content-listchords #score .item_chord .change_tone .num_finder {
	color: #4990f9;
	font-size: 40px;
	margin: 5px 0;
	font-weight: 300;
}
.content-listchords #score .item_chord .change_tone svg {
   width: 36px;
   fill: #4990f9;
}
.content-listchords #score .item_chord .change_tone .button_next{
	transform: rotate(180deg);
}


/***************Account******************/
.loading-bar {
	height: 4px;
	width: 100%;
	overflow: hidden;
	background-color: #e6e6e6;
	position: absolute;
	display: none;
}
.loading-bar .bar {
	background-color: #ffc664;
	float: left;
	width: 300px;
	height: 100%;
	margin-left:-300px;
	animation: loading-bar-animation 1.5s linear infinite;
	-webkit-animation: loading-bar-animation 1.5s linear infinite;
	-ms-animation: loading-bar-animation 1.5s linear infinite;
	-o-animation: loading-bar-animation 1.5s linear infinite;
	-moz-animation: loading-bar-animation 1.5s linear infinite;
}
@keyframes loading-bar-animation{
	from{margin-left: -300px;}
	to{margin-left: 100%;}
}
@-webkit-keyframes loading-bar-animation{
	from{margin-left: -300px;}
	to{margin-left: 100%;}
}
@-ms-keyframes loading-bar-animation{
	from{margin-left: -300px;}
	to{margin-left: 100%;}
}
@-o-keyframes loading-bar-animation{
	from{margin-left: -300px;}
	to{margin-left: 100%;}
}
@-moz-keyframes loading-bar-animation{
	from{margin-left: -300px;}
	to{margin-left: 100%;}
}
.account,
.report {
	display: none;
	z-index: 1000;
	position: relative;
}
.account .overlay,
.report .overlay {
	z-index: 1;
}
.account .overlay_active {
	opacity: 0.3;
}
.box-overlay {
	z-index: 2;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 540px;
	background-color: #ffffff;
	box-shadow: 0px 0px 30px rgba(0,0,0,.3)!important;
	-webkit-box-shadow: 0px 0px 30px rgba(0,0,0,.3)!important;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	overflow: hidden;
	display: none;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.box-overlay .content {
	padding: 30px;
}
.box-overlay .text {
	text-align: left;
}
.box-overlay .button_item {
	width: auto;
}
.box-overlay .title {
	font-size: 28px;
}
.box-overlay .description {
	margin-top: 15px;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
}
.box-overlay .description a {
	font-size: 20px;
	line-height: 30px;
	display: inline;
}
.box-overlay a {
	color: #4990f9;
	text-decoration: underline;
	font-weight: 500;
	font-size: 22px;
	line-height: 50px;
}
.box-overlay .error-message {
	margin-top: 8px;
	color: #d50000;
	font-size: 18px;
	font-family: Arial;
	opacity: 0;
}
.box-overlay form {
	margin-top: 15px;
}
.box-overlay form input {
	width: 100%;
	padding: 5px 0;
	font-size: 22px;
	border: none;
	outline: none;
	border-bottom: 2px solid #4990f9;
}
.box-overlay form textarea {
	resize: none;
	width: calc(100% - 10px);
	height: 100px;
	border: 1px solid #000000;
	outline: none;
	font-family: Arial;
	font-size: 22px;
	padding: 5px;
}
.box-overlay form input.error {
	border-bottom-color: #d50000;
}
.box-overlay form textarea.error {
	border-color: #d50000;
}
.box-overlay form input.error:focus +  label.error,
.box-overlay form textarea.error:focus +  label.error {
	visibility: visible;
}
.box-overlay form .field {
	margin-bottom: 20px;
	position: relative;
}
.box-overlay form label.error {
	font-size: 16px;
	font-family: Arial;
	color: #ffffff;
    padding: 7px 10px;
    background-color: #e03a00;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 50px;
	z-index: 100;
	visibility: hidden;
}
.box-overlay form textarea.error +  label.error {
	top: 120px;
}
.box-overlay form label.error:before {
	position: absolute;
    top: -50%;
    left: 5px;
    content: "";
    border: solid transparent;
    border-width: 10px;
    border-right-color: #e03a00;
    -webkit-transform: translateY(-3px) rotate(90deg);
    transform: translateY(-3px) rotate(90deg);
}
.box-overlay .button {
	margin-top: 20px;
}
.box-overlay .button button {
	font-weight: 500;
    font-size: 22px;
    background: none;
    border: none;
    padding: 14px 20px;
	cursor: pointer;
	outline: none;
	color: #4990f9;
	float: right;
}

#downloadApp .overlay {
	z-index: 2;
}
.box-downloadapp .button {
	text-align: center;
}
.box-downloadapp .button img {
	width: 60%;
}
#downloadApp .button-close {
	position: absolute;
	top: 20px;
	right: 20px;
}
/************/
.view-video {
	display: none;
}
.view-video .overlay {
	z-index: 1999;
}
.view-video .overlay_active {
	opacity: 0.7;
}
.view-video .box-video {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 80%;
	max-width: 768px;
	background-color: #000000;
	z-index: 2000;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.view-video .video {
	width: 100%;
	height: 500px;
}


/***************************************************************************************************/

/* Tất cả các màn hình có độ phân giải thấp nhất là 769px */
@media all and (min-width: 769px){
	.button_item:hover > .content_button, 
	body .hover-change-bg:hover {
		background-color: #f5f5f5;
	}
	#panel_popuplar .search #delete_keysearch:hover > svg,
	#downloadApp .button-close:hover > svg {
		fill: #8c8c8c;
	}
	#main .pointer {
		cursor: pointer;
	}
	.content-chords  #chords p .chord-item:hover,
	.box-overlay a:hover {
		color: #a4a3a3;
	}
	#banner-download .close:hover {
		background-color: #b7b7b7;
	}
	#scrollView {
		min-height: 660px;
	}
	.box-activity .input .button-send:hover svg {
		opacity: 1;
	}
	.box-activity .header .content .button_item:hover {
		background-color: #5d9efd;
	}
	.activity .box-activity .button-like:hover {
		background-image: url(../images/btnlike.png);
	}
	.activity .box-activity .button-like.active:hover {
		background-image: url(../images/btndislike.png);
	}
	#main .box-activity .scroller .item .contents a:hover {
		color: #a4a3a3;
	}
	.content-listchords #navTop #btnMenu:hover > .content_button, 
	.content-listchords #navTop #btnTypeDan:hover > .content_button,
	.content-listchords #navTop #btnTypeChord:hover > .content_button {
		background-color: #0055d245;
	}
	.content-listchords #navTop #tab .item_tab .label:hover {
		color: #ffffff;
	}

}

/* Màn hình có độ phân giải tối đa 768px */
@media only screen and (max-width: 768px) {
	body::-webkit-scrollbar, 
	.scroller_box::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}
	#main .pointer {
		cursor: default;
	}
	#score header {
		padding-top: 30px;
		padding-bottom: 10px;
	}
	#score #name_music {
		font-size: 20px;
	}
	#navTop,
	#navBottom {
		height: 42px;
	}
	#scrollView {
		margin: 42px auto;
	}
	#panel_popuplar .search #search_field {
		font-size: 18px;
		padding: 8px 5px;
	}
	#panel_popuplar .search .icon-shape svg {
		padding-top: 7px;
	}
	#main .fb-like {
		top: 45px;
		bottom: auto;
		z-index: 9;
	}
	
	/*********Group getit********/
	#group_getit .content .icon img {
		height: 30%;
	}
	#group_getit .content .text_getit {
		font-size: 14px;
	}
	#footer .version,
	#group_getit {
		display: none;
	}
	
	/**********Tabs***********/
	#scrollView .loader {
		width: 36px;
		height: 36px;
		margin-left: -18px;
		margin-top: -18px;
		border-width: 5px;
	}
	.content-tabs #navBottom .button_item .content_button .text {
		font-size: 13px;
	}
	#navTop #groupButtonTypeDan .content_button .icon-shape img,
	#navTop #groupButtonTypeChord .content_button .icon-shape img {
		height: 24px;
	}
	#navTop #groupButtonTypeDan .name_typedan,
	#navTop #groupButtonTypeChord .name_typechord {
		font-size: 18px;
	}
	#navTop #groupButtonTypeDan, 
	#navTop #groupTypeDan {
		width: 220px;
	}
	#navTop #groupTypeDan .button_item,
	#navTop #groupTypeChord .button_item {
		padding: 10px 0;
	}
	#navTop #btnTypeDan #icon_arrow .icon,
	.content-listchords #groupButtonTypeChord #btnTypeChord #icon_arrow .icon {
		width: 14px;
		height: 12px;
	}
	#navTop #btnTypeDan .content_button div,
	#navTop #btnTypeDan .content_button h2 {
		padding: 0 5px;
	}
	.content-tabs #groupSpeed .percent {
		font-size: 12px;
	}
	.content-tabs #groupSpeed {
		height: 30px;
	}
	.content-tabs #tabs .text_note {
		font-size: 25px;
	}
	.content-tabs #tabs .numFrame {
		font-size: 22px;
	}
	.content-tabs #tabs .line_curve {
		stroke-width: 4px;
	}
	.content-tabs #tabs .text_tab {
		font-size: 35px;
	}
	.content-tabs #tabs .line_frame_repeat {
		stroke-width: 2;
	}
	.content-tabs #navTop #btnChord {
		right: 0px;
	}
	.content-tabs #navBottom .button_item .content_button .selected {
		width: 40px;
		height: 5px;
	}
	.content-tabs #navTop #btnFavorites {
		left: 60px;
	}
	
	
	/**********Chords*********/
	.content-chords #navTop  .title_chord h2 {
		font-size: 18px;
	}
	.content-chords #navTop #btnTab {
		right: 0px;
	}
	.content-chords  #chords {
		padding: 10px;
	}
	.content-chords  #chords p {
		font-size: 13px;
		line-height: 16px;
	}
	.content-chords  #chords .chord_lyric {
		margin-bottom: 16px;
	}
	.content-chords #navBottom .group-change-tone {
		width: 180px;
		padding-left: 15px;
	}
	.content-chords #navBottom .group-change-tone .frame {
		height: 30px;
	}
	.content-chords #navBottom .group-change-tone .frame .text {
		font-size: 24px;
	}
	.content-chords #navBottom .group-change-tone .frame .button {
		font-size: 26px;
	}
	
	
	
	
	/*Button item*/
	.button_item {
		width: 60px;
	}
	.button_item .content_button svg.icon-shape {
		width: 60px;
	}
	.button_item .content_button .icon-shape,
	.button_item .content_button .icon-shape img {
		height: 30px;
	}
	/*Item song*/
	#main .item_song .name {
		font-size: 16px;
	}
	#main .item_song:before {
		font-size: 13px;
	}
	#main .item_song .songer {
		margin-top: 3px;
		font-size: 12px;
	}
	#main .item_song .content {
		padding-left: 35px;
	}
	#main .item_song {
		padding: 6px 15px;
	}
	#main .item_song .icon {
		bottom: 3px;
	}
	#main .item_song .icon img {
		height: 14px;
	}
	/**/
	#banner-download {
		bottom: 45px;
	}
	#banner-download img.banner {
		height: 45px;
	}
	#banner-download .close {
		line-height: 18px;
	}
	/**/
	#boxMenu .header {
		height: 42px;
	}
	#boxMenu .header h3 {
		font-size: 20px;
	}
	#boxMenu .item {
		padding: 12px 5px 12px 18px;
	}
	#boxMenu .item .name {
		font-size: 18px;
	}
	#boxMenu .item .description {
		font-size: 13px;
		margin-top: 2px;
	}
	#boxMenu .item .icon {
		margin-right: 12px;
		width: 30px;
		height: 50px;
	}
	#boxMenu .item .icon svg {
		width: 30px;
		height: 30px;
	}
	#boxMenu .scroller ul li .arrow svg {
		width: 10px;
	}
	#boxMenu .scroller ul li ul .item .icon {
		width: 60px;
		height: 34px;
	}
	#boxMenu .scroller ul li ul .item .name {
		font-size: 14px;
	}
	#boxMenu .scroller ul li ul .item .description {
		font-size: 10px;
	}
	.box-left .box {
		max-width: 300px;
		left: -310px;
	}
	/*********************/
	.box-activity {
		right: 8px;
		bottom: 90px;
		height: calc(100% - 140px);
	}
	.box-activity .header {
		height: 40px;
	}
	.box-activity .input {
		min-height: 36px;
	}
	.box-activity .scroll_box {
		height: calc(100% - 40px - 38px);
	}
	.box-activity .input textarea {
		padding: 11px;
		font-size: 14px;
	}
	.box-activity .input .buttons {
		right: 7px;
		height: 38px;
	}
	.box-activity .input .button-send svg {
		width: 21px;
		height: 21px;
	}
	.box-activity .input .button-send.focus svg {
		opacity: 1;
	}
	.box-activity .header .content .button_item {
		width: 40px;
	}
	.box-activity .header .content .title {
		font-size: 18px;
	}
	.box-activity .header .content .button_item svg {
		width: 9px;
	}
	
	.activity .button-activity {
		width: 36px; 
		height: 36px; 
		right: 6px;
		bottom: 50px;
	}
	.activity .button-activity .icon-chat {
		background-size: 18px 22px;
	}
	.activity .button-activity .icon-close {
		background-size: 10px 10px;
	}
	.box-activity .scroller .item .avatar {
		width: 35px;
		height: 35px;
	}
	#main .box-activity .scroller .item .name {
		font-size: 15px;
	}
	#main .box-activity .scroller .item .contents {
		font-size: 14px;
	}
	#main .box-activity .scroller .item .date,
	#main .box-activity .scroller .item .likes_comments {
		font-size: 12px;
	}
	#main .box-activity .scroller .item .likes_comments, 
	#main .box-activity .scroller .item .date, 
	#main .box-activity .scroller .item .contents {
		margin-top: 3px;
	}
	.box-activity .scroller .item .content {
		padding-right: 7px;
		padding-bottom: 7px;
	}
	.box-activity .scroller .item {
		padding-top: 10px;
	}
	.activity .box-activity .button-like {
		width: 20px;
		height: 16px;
	}
	.box-activity .scroller .item .avatar {
		margin-right: 10px;
	}
	.box-activity .input .avatar-me {
		width: 24px;
		height: 24px;
		top: 7px;
	}
	.box-activity .input textarea.has-loginfb {
		padding-left: 35px;
	}
	.activity .notification {
		width: 15px;
		height: 15px;
		font-size: 8px;
		line-height: 15px;
	}

	/***********List chords*********/
	.content-listchords #navTop {
		height: 80px;
	}
	.content-listchords #navTop .button_item {
		height: 42px;
	}
	.content-listchords #scrollView {
		margin-top: 80px;
	}
	.content-listchords #navTop #tab {
		height: 38px;
	}
	.content-listchords #navTop #tab .item_tab .label {
		font-size: 15px;
	}
	.content-listchords #navTop #tab #line_selected {
		height: 2px;
	}
	.content-listchords #groupButtonTypeChord {
		left: 50px;
	}
	.content-listchords #groupButtonTypeChord,
	.content-listchords #navTop #groupTypeChord {
		width: 140px;
	}
	.content-listchords #score .item_chord {
		width: 100%;
		height: 160px;
	}
	.content-listchords #score .item_chord .content_item {
		margin-right: 20px;
	}
	.content-listchords #score .item_chord .content_item .chord {
		transform: scale(0.8);
	}
	.content-listchords #score .item_chord .title_chord {
		padding: 3px 20px;
	}
	.content-listchords #score .item_chord .title_chord .name_chord {
		font-size: 18px;
	}
	.content-listchords #score .item_chord .change_tone .num_finder {
		font-size: 34px;
	}
	.content-listchords #score .item_chord .change_tone svg {
		width: 28px;
	}
	
	/*********Account********/
	.box-overlay {
		width: 290px;
	}
	.box-overlay .content {
		padding: 15px;
	}
	.box-overlay .title {
		font-size: 18px;
	}
	.box-overlay .description {
		margin-top: 10px;
	}
	.box-overlay .description,
	.box-overlay .description a	{
		font-size: 14px;
		line-height: 20px;
	}
	.box-overlay .error-message {
		font-size: 12px;
		margin-top: 4px;
	}
	.box-overlay form {
		margin-top: 8px;
	}
	.box-overlay form .field {
		margin-bottom: 8px;
	}
	.box-overlay form input {
		padding: 3px 0;
		font-size: 15px;
		border-bottom-width: 1px;
	}
	.box-overlay .button {
		margin-top: 10px;
	}
	.box-overlay .button button {
		font-size: 15px;
		padding: 8px 12px;
	}
	.box-overlay a {
		font-size: 15px;
		line-height: 30px;
	}
	.box-overlay form label.error {
		font-size: 11px;
		padding: 4px 7px;
		top: 30px;
	}
	.box-overlay form label.error:before {
		border-width: 5px;
		-webkit-transform: translateY(0px) rotate(90deg);
		transform: translateY(0px) rotate(90deg);
	}
	
	#downloadApp .button-close {
		top: 10px;
		right: 10px;
	}
	
	.loading-bar .bar {
		width: 150px;
		margin-left: -150px;
	}
	@keyframes loading-bar-animation{
		from{margin-left: -150px;}
		to{margin-left: 100%;}
	}
	@-webkit-keyframes loading-bar-animation{
		from{margin-left: -150px;}
		to{margin-left: 100%;}
	}
	@-ms-keyframes loading-bar-animation{
		from{margin-left: -150px;}
		to{margin-left: 100%;}
	}
	@-o-keyframes loading-bar-animation{
		from{margin-left: -150px;}
		to{margin-left: 100%;}
	}
	@-moz-keyframes loading-bar-animation{
		from{margin-left: -150px;}
		to{margin-left: 100%;}
	}
	/*********/
	.view-video .box-video {
		width: 70%;
	}
	.view-video .video {
		height: 320px;
	}
}

/* Màn hình có độ phân giải tối đa 360px */
@media only screen and (max-width: 360px) {
	.content-tabs #navTop #btnTypeDan .content_button h2 {
		display: none;
	}
	.content-tabs #tabs .text_note {
		font-size: 38px;
	}
	.content-tabs #tabs .numFrame {
		font-size: 34px;
	}
	.content-tabs #tabs .text_tab {
		font-size: 46px;
	}
	.view-video .box-video {
		width: 100%;
	}
}