/*!
Theme Name: Guitar.vn
Theme URI: https://phongguitar.edu.vn/
Author: Hung Nguyen
Author URI: https://phongguitar.edu.vn/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: guitarvn_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

guitarvn_theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* SETUP */

html {
	overflow-x: hidden;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	background: #ebf5f4;
	overflow-x: hidden;
	color: #666;
        font-weight: 600;

}

input:focus, button:focus {
	outline: none;
}

a {
	transition: all 300ms;
}

a:hover {
	text-decoration: none;
}

button {
	transition: all 350ms;
}

mark {
	background: #fffac1;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ddd; 
}

.row.no-padding {
	margin: 0;
}

.row.no-padding > div[class^="col-"] {
	padding: 0;
}

.shadow-sm, .dropdown-menu {
    box-shadow: 0 0px 10px rgba(0,0,0,.04)!important;
}

/* TOOLTIPS */

.tooltip {
    z-index: 999999999;
}

.tooltip .tooltip-inner {
	font-size: 12px;
    background: #0f141b;
    color: #fff;
    line-height: 20px;
    white-space: nowrap;
    padding: 0 5px;
}

.tooltip .arrow {
	display: none;
}

/* DROPDOWN */

.dropdown-center {
	right: auto!important;
	left: 50%!important;
	transform: translateX(-50%)!important;
	bottom: 100%!important;
	top: initial!important;
}

.dropdown-menu {
	max-height: 350px;
	overflow-y: auto;
}

.dropdown-menu.show {
	padding: 10px 0;
	border-radius: 5px;
	border: 0;
}

.dropdown-item {
	padding: 0 15px;
    line-height: 35px;
    color: #111;
    font-size: 15px;
}

.dropdown-item.active {
	background: #d33;
	color: #fff;
}

.dropdown-item:active {
	background: initial;
	color: initial;
}

/* LOADING */

.loader, .loader:after {
	border-radius: 50%;
	width: 50px;
	height: 50px;
}
.loader {
	margin: 30px auto;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 5px solid #f2f2f2;
	border-right: 5px solid #f2f2f2;
	border-bottom: 5px solid #f2f2f2;
	border-left: 5px solid #d33;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1s infinite linear;
	animation: load8 1s infinite linear;
}
@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* HEADER */

body.admin-bar #site_header {
	top: 32px;
}

#site_header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background: #222f3e;
	z-index: 1995;
}

.menu_button {
	width: 40px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #a2a2a2;
    cursor: pointer;
    transition: all 300ms;
}

.menu_button:hover {
	color: #fff;
}

/* LOGO */

.site_logo {
	position: relative;
	margin-right: 30px;
    /*margin-left: 15px;
    padding-left: 20px;*/
}

/*.site_logo:before {
	content: '';
	width: 1px;
	height: 30px;
	background: rgb(255 255 255 / 5%);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}*/

.site_logo a img {
	width: auto;
	height: 50px;
}

/* HEADER MENU */

.header_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header_menu ul li {
	margin-right: 30px;
}

.header_menu ul li:last-child {
	margin-right: 0;
}

.header_menu ul li a {
	display: block;
	color: #fff;
	line-height: 50px;
	font-weight: 600;
	color: #a2a2a2;
}

.header_menu ul li a:hover {
	color: #fff;
}

/* HEADER SEARCH FORM */

#site_header .search_form {
	padding: 5px 30px;
}

#site_header .search_form .form_fields {
	position: relative;
}

#site_header .search_form .form_fields input{
	width: 100%;
	height: 40px;
	border: 0;
	padding: 0 15px;
	border-radius: 5px;
	background: rgb(0 0 0 / 16%);
	transition: all 300ms;
}

#site_header .search_form .form_fields input:focus {
	background: #fff;
}

#site_header .search_form .form_fields input:focus + button {
	color: #a2a2a2;
}

#site_header .search_form .form_fields button {
	position: absolute;
    border: 0;
    background: transparent;
    color: rgb(255 255 255 / 25%);
    height: 40px;
    width: 40px;
    padding: 0;
    top: 0;
    right: 0;
}

#ajaxsearchpro1_1 {
	background: #1c2532!important;
	border-radius: 5px!important;
	box-shadow: none!important;
}

#ajaxsearchpro1_1 .probox {
	height: 40px!important;
	border: 0!important;
	background: transparent!important;
	border-radius: 5px!important;
}

#ajaxsearchpro1_1 .probox .proinput {
	margin: 0 0 0 15px;
}

#ajaxsearchpro1_1 .probox .promagnifier {
	width: 40px!important;
	height: 40px!important;
	padding: 0!important;
	background: transparent!important;
}

#ajaxsearchpro1_1 .probox .promagnifier .innericon {
	width: 40px!important;
	height: 40px!important;
}

#ajaxsearchpro1_1 .probox .promagnifier .innericon svg {
	fill: #727272!important;
}

#ajaxsearchpro1_1 .probox .proinput input.orig {
	height: 40px!important;
	line-height: 40px!important;
	font-size: 15px!important;
	color: #757575!important;
	padding: 0!important;
}

#ajaxsearchpro1_1 .probox .proinput input.orig::placeholder {
	color: #757575;
	font-size: 15px;
}

#ajaxsearchpro1_1 .probox .proloading {
	padding: 4px 0!important;
}
#ajaxsearchpro1_1 .probox .proclose {
	padding: 3px 0!important;
}

#ajaxsearchprores1_1 {
	border: 0!important;
}

/* HEADER RIGHT MENU */

#site_header .right_menu {
	margin: 0;
	padding: 5px 0;
	list-style: none;
}

#site_header .right_menu li {
	display: inline-block;
}

#site_header .right_menu .profile_dropdown {
	cursor: pointer;
	margin-left: 10px;
	padding-left: 20px;
	border-left: 1px solid rgb(255 255 255 / 8%);

}

#site_header .right_menu .profile_dropdown img {
	width: 42px;
	height: 42px;
	border-radius: 100%;
	margin-left: 10px;
}

#site_header .right_menu .profile_dropdown span {
	color: #a2a2a2;
}

#site_header .right_menu .btn {
	padding: 0 20px;
    line-height: 40px;
    display: inline-block;
    background: #d33;
    color: #fff;
    transition: all 300ms;
}

#site_header .right_menu .btn:hover {
	background: #fff;
	color: #333;
}

#site_header .right_menu .btn i {
	margin-right: 8px;
}

/* LOGIN PAGE */

.login_page {
	width: 90%!important;
	overflow: hidden;
	padding: 0!important;
	margin: 30px auto;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0px 10px rgba(0,0,0,.04);
}

.login_form {
	padding: 30px 60px;
	display: flex;
    align-items: center;
    height: 600px;
}

.login_background {
	background-size: cover;
	height: 600px;
}

.form_header h1 {
	display: flex;
	align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 30px;
}

.form_header img {
	width: 60px;
	margin-right: 10px;
}

body.modal-open {
	overflow: hidden;
	height: 100vh;
}

@media (min-width: 992px) {
	.modal-lg, .modal-xl {
	    max-width: 900px;
	}
}
#login_modal {
	backdrop-filter: blur(10px);
}

#login_modal .modal-content {
	border: 0;
	position: relative;
	height: 550px;
    box-shadow: 0 1px 20px #868686;
}

#login_modal .modal-content .close_button {
    position: absolute;
    right: -50px;
    top: 0;
    width: 40px;
    height: 40px;
    display: block;
    border: 0;
    background: #d33;
    color: #fff;
    border-radius: 100%;
    font-size: 20px;
    line-height: 40px;
    transition: all 300ms;
}

#login_modal .modal-content .close_button:hover {
	background: #000;
}

#login_modal .modal-body {
	padding: 0;
	overflow: hidden;
	border-radius: 4px;
}

#login_modal .login_image {
	background-image: url(assets/images/login_background.png);
    height: 550px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: #b9f3ff;
}


#login_modal .login_form {
	height: 550px;
	padding: 0 20px;
	text-align: center;
	background: #f7fbfb;
}

#login_modal .login_form .tab-content {
	width: 100%;
}

#login_modal .login_form .form_header {
	
}

#login_modal .login_form .form_title {
	line-height: 50px;
}

#login_modal .login_form .form_title img {
	display: inline-block;
	height: 50px;
	width: auto;
	margin-left: -20px;
}

#login_modal .login_form .form_title span {
	vertical-align: middle;
	margin-left: 10px;
}

#login_modal .login_form .form_body {
	padding: 30px 50px;
}

#login_modal .login_form .form_body .form_inputs {
	overflow: hidden;
	border-radius: 5px;
	background: #fff;
}

#login_modal .login_form .form_body .form_inputs input {
	height: 50px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #f2f2f2;
    padding: 0 20px;
}


.login_submit button {
	width: 100%;
	height: 50px;
	line-height: 50px;
}

.login_submit button:hover {
	color: #fff!important;
	background: #000!important;
}

.form_checkbox {
	margin: 20px 0;
	padding-left: 30px;
	position: relative;
	text-align: left;
	line-height: 20px;
}

.form_checkbox input[type="checkbox"] {
	width: 0;
	height: 0;
}

.form_checkbox input[type="checkbox"]:after {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    text-align: center;
    font-size: 15px;
}

.form_checkbox input[type="checkbox"]:checked:after {
	content: "\f00c";
	background: #1dd1a1;
	color: #fff;
}

.form_checkbox label {
	vertical-align: middle;
}


/* SIDEMENU */

#side_menu {
	position: fixed;
	z-index: 1994;
	background: #fff;
	border-right: 1px solid #f2f2f2;
	width: 70px;
	top: 70px;
	bottom: 0;
	padding: 20px 0;
	transition: all 300ms;
}

#side_menu.unfold {
	width: 230px;
	overflow: hidden;
}

#side_menu.unfold + #main_content:not(.main_single) {
	margin-left: 100px;
}

#side_menu.unfold .side_nav li a span {
	opacity: 1;
	visibility: visible;
	transition-delay: 300ms;
}

.side_nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.side_nav li {
	padding: 5px 10px;
}

.side_nav li.active a {
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    background: #1dd1a1!important;
    color: #fff!important;
}

.side_nav li a:hover {
	background: #f9f9f9;
	transition-delay: 0;
}

.side_nav li a {
	display: flex;
	position: relative;
	border-radius: 5px;
	color: #a2a2a2;
}

.side_nav li a i {
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
}

.side_nav li a span {
	white-space: nowrap;
	position: absolute;
    top: 0;
    left: 50px;
	line-height: 50px;
    font-weight: 600;
    padding: 0 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms;
    transition-delay: 0;
}

/*.side_nav li a span {
	position: absolute;
    font-size: 12px;
    left: 100px;
    white-space: nowrap;
    line-height: 30px;
    background: #0f141b;
    padding: 0 15px;
    border-radius: 30px;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    transition: all 300ms;
}

.side_nav li a i:hover + span {
	visibility: visible;
	opacity: 1;
	left: 60px;
}*/


/* MAIN CONTENT */

#main_content {
	width: 100vw;
	padding-top: 70px!important;
	transition: all 300ms;
}

#main_content.main_single,
#main_content.main_single .container-sm {
	width: 100vw!important;
	max-width: 100vw!important;
	margin: 0;
	padding: 0;
}

#main_content.main_single .container-sm {
	padding-top: 70px;
}

/* SINGLE SONG */

.single_song {
	width: 70%;
}

.single_song .song_content {
	position: relative;
	background: #fff;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
}

.single_song .lyric_content {
	padding: 0px 50px 100px 50px;
	height: calc(100vh - 70px);
    overflow-y: auto;
}

.single_song .lyric_content .lyric_line {
	font-size: 15px;
}

.single_song .lyric_toolbar {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 10px;
	background: #fff;
	z-index: 1040;
	height: 70px;
	border-radius: 10px;
	border: 1px solid #f2f2f2;
}


.single_song .lyric_toolbar .btn-group {
	padding: 0 20px;
    border-left: 1px solid #f2f2f2;
}


.single_song .lyric_toolbar .btn-group label {
	font-size: 16px;
	margin: 0 20px 0 0;
	line-height: 30px;
}

.single_song .lyric_toolbar .btn-group button {
    background: #fff;
    border: 0;
    border-left: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    border-radius: 0;
    font-size: 15px;
    color: #333;
    font-weight: 600;
    line-height: 30px;
    min-width: 30px;
    padding: 0 10px;
}

.single_song .lyric_toolbar .btn-group button:hover {
	background: #f2f2f2;
}

.single_song .lyric_toolbar .btn-group > button:last-child {
	border-right: 1px solid #e2e2e2;
}

.single_song .lyric_toolbar #play_button {
	border: 0;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #dd3333;
    color: #fff;
}

.single_song .lyric_toolbar #play_button i {
	margin-left: 1px;
	margin-right: 0px;
    line-height: 50px;
}

.single_song .lyric_toolbar .right_menu {
	position: absolute;
	top: 0;
	right: 20px;
	height: 70px;
}

.single_song .lyric_toolbar .right_menu button {
	padding: 0;
	background: transparent;
	border: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-left: 10px;
	font-size: 16px;
	color: #333;
	transition: all 300ms;
}

.single_song .lyric_toolbar .right_menu .dropdown.show button {
	background: #f2f2f2;
}

.single_song .lyric_toolbar .right_menu button:hover,
.single_song .lyric_toolbar .right_menu button.active {
	background: #f2f2f2;
	border-radius: 5px;
}

.single_song .lyric_toolbar button[data-tooltip] {
	position: relative;
}

.single_song .lyric_toolbar button[data-tooltip]:hover:before {
	opacity: 1;
	visibility: visible;
}

.single_song .lyric_toolbar button[data-tooltip]:before {
	content: attr(data-tooltip);
	position: absolute;
	font-size: 12px;
	background: #0f141b;
	color: #fff;
	line-height: 20px;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	transition: all 300ms;
	bottom: 40px;
    padding: 0 5px;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.single_song .lyric_toolbar #setting_dropdown {
	width: 250px;
	margin-bottom: 20px;
}

.single_song .lyric_toolbar #setting_dropdown ul {
	padding: 0 20px;
	margin: 0;
}

.single_song .lyric_toolbar #setting_dropdown li {
	height: 20px;
	margin: 20px 0;
}

.single_song .lyric_toolbar #setting_dropdown p {
	margin: 0;
    line-height: 20px;
    font-size: 15px;
    color: #777;
}

.toggle_checkbox label {
	position: relative;
	width: 36px;
    height: 20px;
    margin: 0;
    background: #f2f2f2;
    border-radius: 20px;
    transition: all 350ms;
    cursor: pointer;
}

.toggle_checkbox label:before {
	position: absolute;
    content: '';
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 100%;
    top: 3px;
    left: 3px;
    transition: all 350ms;
}

.toggle_checkbox input[type="checkbox"] {
	display: none;
}

.toggle_checkbox input[type="checkbox"]:checked + label {
	background: #1dd1a1;
}

.toggle_checkbox input[type="checkbox"]:checked + label:before {
	left: 19px;
}

.single_song .lyric_header {
	border-bottom: 1px solid #f2f2f2;
	margin-bottom: 20px;
	margin-left: -50px;
	margin-right: -50px;
	padding: 20px 50px;
}

.single_song .lyric_header .song_title {
	width: 70%;
}

.single_song .lyric_header .song_title h1 {
	font-size: 30px;
    margin: 0;
    line-height: 50px;
    color: #222;
}

/* POST BUTTON */

.post_buttons {
	padding: 5px 0;
}

.post_buttons.sticky,
.single_tab .post_buttons.sticky {
	position: absolute;
	top: -50px;
    right: 50px;
    transition: top 300ms;
    z-index: 999;
}

.single_tab .post_buttons.sticky {
	right: 20px;
}

.post_buttons.sticky.show,
.single_tab .post_buttons.sticky.show {
	top: 10px;
}

.post_buttons button {
	padding: 0 10px;
	height: 40px;
	background: #fff;
	border: 0;
	border-radius: 5px;
	font-size: 15px;
	transition: all 300ms;
	margin-left: 10px;
	border: 1px solid #f2f2f2;
}

.post_buttons button i {
	margin-right: 5px;
}

.post_buttons button:hover { 
	background: #dd3333;
	color: #fff;
}

/* SONG INFO */

.single_song .song_info {
	padding-bottom: 20px;
}

.single_song .song_info .rating_title {
	font-size: 15px;
	line-height: 20px;
	margin: 0;
}

.single_song .song_info .info_left {
	padding: 10px 0;
}

.single_song .song_info .info_left .info_button {
	height: 30px;
	background: #f2f2f2;
	border-radius: 5px;
	line-height: 30px;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.single_song .song_info .info_left .info_button button {
	line-height: 30px;
	height: 30px;
	background: #1dd1a1;
	color: #fff;
	vertical-align: top;
}

.single_song .song_info .info_left .info_button i {
	margin-right: 0px;
	margin-left: 10px;
}

.single_song .song_info .info_left #toggle_song_chords.active {
	background: #d33;
	color: #fff;
}

.single_song .song_info .info_left .info_button > span {
	padding: 0 10px;
	font-weight: 600;
}

.single_song .song_info .info_left .info_button a {
	color: #333;
}

.single_song .song_info .info_left button {
	padding: 0 10px;
    height: 30px;
    border-radius: 5px;
    border: 0;
    font-weight: 600;
    color: #a0a0a0;
    background: #eaeaea;
}

.single_song .song_info .info_left i {
	margin-right: 5px;
}

.single_song .song_info .post_rating span {
	line-height: 30px;
	color: #a2a2a2;
	font-size: 15px;
}

.single_song .song_info .post_rating span.active {
	color: #ffa500;
}

/* SONG FULLSCREEN */

.fullscreen_mode.song_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1996;
}

.fullscreen_mode.song_content .lyric_toolbar {
	position: fixed;
}

.fullscreen_mode.song_content .lyric_content {
	padding: 20px;
	overflow-x: hidden;
	height: 100vh;
}

.fullscreen_mode.song_content .post_buttons,
.fullscreen_mode.song_content .song_info {
	display: none!important;
}
.fullscreen_mode.song_content .lyric_header {
    padding: 0px 70px 20px 70px;
}

.fullscreen_mode.song_content .lyric_header h1 {
	font-size: 20px;
}

/* SONG CHORDS */

#song_chords {
	overflow: hidden;
	max-height: 0;
	transition: max-height 350ms;
}

#song_chords.show {
	max-height: 9999px;
}

/* SINGLE SIDEBAR */

.single_sidebar {
	position: fixed;
	top: 70px;
	right: 0;
	bottom: 0;
	width: 30%;
	background: #ebf5f4;
	overflow-y: auto;
}

.sidebar_widget {
	padding: 20px;
	border-bottom: 1px solid #eaeaea;
}

.sidebar_widget .widget_title {
	position: relative;
	cursor: pointer;
}

.sidebar_widget h3 {
	font-size: 15px;
	line-height: 30px;
	margin: 0;
	color: #222;
}

.sidebar_widget .widget_title button {
	position: absolute;
    top: 0;
    right: 0;
    border: 0;
    max-width: 25px;
    overflow: hidden;
    height: 25px;
    line-height: 25px;
    background: #e0e0e0;
    font-size: 13px;
    border-radius: 3px;
    padding: 0 8px;
    font-weight: 600;
    margin: 2.5px 0;
    transition: all 300ms;
}

.sidebar_widget .widget_title button i {
	font-size: 10px;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    line-height: 25px;
}

.sidebar_widget .widget_title button:hover {
	background: #d33;
	color: #fff;
	max-width: 200px; 
}


.sidebar_widget .post_author .user_avatar {
	border-radius: 100%;
	overflow: hidden;
	margin-right: 15px;
}

.sidebar_widget .post_author .user_avatar img {
	width: 50px;
	height: 50px;
}

.sidebar_widget .post_author .user_info {
	padding: 5px 0;
}

.sidebar_widget .post_author .user_info .user_name {
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	color: #111;
}

.sidebar_widget .post_author .user_info .post_date {
	font-size: 13px;
	margin: 0;
	line-height: 20px;
	color: #a2a2a2;
}

.sidebar_widget .song_videos {
	list-style: none;
	margin: 0;
	padding: 15px 0 0 0;
}

.sidebar_widget .song_videos .video_item {
	margin-right: 15px;
}

.sidebar_widget .song_videos .video_item a {
	display: inline-block;
	overflow: hidden;
	height: 84px;
	border-radius: 5px;
	outline: none;
}

.sidebar_widget .song_videos .video_item img {
	width: 150px;
	height: auto;
	margin-top: -15px;
}

.post_counter {
	padding: 15px 0;
}

.post_counter .count_item span {
	color: #999;
}

.post_counter .count_item:after {
	position: absolute;
	content: '';
	width: 1px;
	height: 100%;
	top: 0;
	right: 0;
	background: #eaeaea;
}

.post_counter .col-3:last-child .count_item:after {
	display: none;
}

/* SINGLE PAGE */

.single_page {
	width: 100%;
	padding: 30px;
}

.single_page .page_content {
	position: relative;
}

.home_section {
	margin-bottom: 40px;
}

.section_head {
	margin-bottom: 20px;
}

.section_head .section_title {
	line-height: 50px;
	font-size: 24px;
	color: #333;
	margin: 0;
}

.section_head .section_button {
	margin: 5px 0;
}

.section_head .section_button .btn {
	display: inline-block;
    line-height: 40px;
    font-size: 15px;
    height: 40px;
    background: #fff;
    color: #333;
    font-weight: 600;
    padding: 0 20px;
    border-radius: 5px;
    transition: all 300ms;
}

.section_head .section_button .btn:hover,
.section_head .section_button .btn.active {
	background: #d33!important;
	color: #fff;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.section_head .section_button.button_group {
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.section_head .section_button.button_group a {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.section_head .section_button.button_group a:hover {
	background: #f2f2f2!important;
	color: #000;
	box-shadow: none!important;
}

.section_head .section_button.button_group a.active {
	background: #d33!important;
	padding: 0 20px;
	color: #fff;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.section_head .section_button .btn i {
	margin-left: 15px;
}

.playlist_item a {
	display: block;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 30px;
}

.playlist_item a img {
	width: 100%;
	height: auto;
}

.home_songs {
	padding: 10px 20px;
	background: #fff;
	border-radius: 5px;
	border: 1px solid #f2f2f2;
}

.home_songs .col-md-6:nth-child(11) .song_item,
.home_songs .col-md-6:nth-child(12) .song_item {
	border-bottom: 0;
}

.song_item {
	border-bottom: 1px solid #f2f2f2;
	padding: 15px;
	background: #fff;
}

.song_item .song_number {
	line-height: 50px;
    font-size: 28px;
    font-weight: 600;
    margin-right: 20px;
}

.song_item .song_info {
	padding: 5px 0;
}

.song_item .song_info strong,
.song_item .song_info span {
	line-height: 20px;
}

.song_item .song_info strong a {
	color: #333;
}

.song_item .song_info strong a:hover {
	color: #d33;
}

.song_item .song_info span a {
	color: #999;
	font-size: 13px;
}

.song_item .song_counter {
	text-align: right;
}

.song_item .song_rating {
	line-height: 25px;
}

.song_item .song_rating i {
	color: #ffa500;
}

.song_item:hover .song_count {
	opacity: 1;
	visibility: visible;
}

.song_item .song_count {
	opacity: 0;
	visibility: hidden;
	font-size: 12px;
	color: #555;
	line-height: 25px;
	transition: 300ms;
}

.song_item .song_count span {
	margin-left: 10px;
}

.home_search .search_form {
	position: relative;
	width: 100%;
    background: url(https://images.unsplash.com/photo-1510915361894-db8b60106cb1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
    overflow: hidden;
    border-radius: 5px;
    background-size: 100% auto;
    background-position: center;
}

.home_search .search_form form {
	position: relative;
	z-index: 1;
	height: 100%;
	width: 70%;
	height: 250px;
}

.home_search .search_form form .form_inner {
	width: 100%;
}

.home_search .search_form form h3 {
	text-align: center;
    color: #fff;
    line-height: 30px;
    margin-bottom: 30px;
}

.home_search .search_form:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(29 209 161 / 80%);
	z-index: 0;
}

.home_search .search_form .form_fields {
	position: relative;
}

.home_search .search_form input {
	width: 100%;
	background: #fff;
	border-radius: 5px;
	background: #fff;
	padding: 0 80px 0 30px;
	border: 0;
	line-height: 50px;
}

.home_search .search_form button {
	border: 0;
    line-height: 40px;
    height: 40px;
    width: 40px;
    padding: 0;
    border-radius: 5px;
    background: #d33;
    color: #fff;
    position: absolute;
    right: 5px;
    top: 5px;
}

.home_search .home_genre {
	margin-top: 20px;
}

.home_search .home_genre a {
	line-height: 40px;
	background: #fff;
	font-weight: 600;
	color: #333;
	border-radius: 5px;
	padding: 0 13px;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
}

.home_search .home_genre a:last-child {
	margin-right: 0;
}

.home_search .home_genre a:hover {
	color: #fff;
	background: #d33;
}

/* SONG ARCHIVE */

.song_archive {
	padding: 30px;
}

.song_archive .archive_tabs {
	background: #fff;
	line-height: 60px;
	border-radius: 5px;
	margin-bottom: 30px;
	overflow: hidden;
	padding: 0 15px;
}

.song_archive .archive_tabs a {
	position: relative;
	display: block;
	line-height: 50px;
	padding: 0 20px;
	color: #333;
	font-weight: 600;
}

.song_archive .archive_tabs a span {
	display: inline-block;
    background: #1dd1a1;
    color: #fff;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 18px;
    margin-left: 8px;
    height: 17px;
    vertical-align: middle;
}

.song_archive .archive_tabs a i {
	margin-right: 10px;
}

.song_archive .archive_tabs a.active {
	background: #f9f9f9;
}

.song_archive .archive_tabs a.active:after {
	content: '';
	width: 100%;
	height: 5px; 
	background: #d33;
	position: absolute;
	bottom: 0;
	left: 0;
}

.archive_songs {
}

.archive_songs .lyric_excerpt p {
	font-size: 13px;
	font-style: italic;
	line-height: 25px;
	color: #666;
	margin: 0;

}

.archive_songs .lyric_excerpt p .chord {
	color: #d33;
	font-weight: 600;
}

.archive_songs .song_item {
	background: #fff;
	border-radius: 5px;
	border-bottom: 0;
	margin-bottom: 20px;
}

.archive_songs .song_item .song_number {
	display: inline-block;
	margin-right: 16px;
}

.archive_songs .song_item .song_number i {
	display: block;
    line-height: 40px;
    height: 40px;
    margin-top: 5px;
    width: 40px;
    background: #f2f2f2;
    text-align: center;
    font-size: 20px;
    border-radius: 5px;
}

.archive_songs .song_item .song_name a {
	display: inline-block;
	line-height: 30px;
	vertical-align: top;
}

.archive_songs .song_item .song_name, .archive_songs .song_item .song_artist {
	line-height: 30px;
	font-size: 15px;
    color: #999;
    font-weight: 600;
    display: block;
}

.archive_songs .song_item .lyric_excerpt {
	margin: 10px 0;
	padding: 15px 0;
	border-top: 1px solid #f2f2f2;
	border-bottom: 1px solid #f2f2f2;
	display: block;
    color: #333;
}

.archive_songs .song_item .lyric_excerpt .lyric_chords {
	margin-bottom: 10px;
}

.archive_songs .song_item .lyric_excerpt .lyric_chords span {
	font-size: 13px;
    background: #f2f2f2;
    border: 1px solid #ddd;
    line-height: 20px;
    border-radius: 3px;
    padding: 0 5px;
    margin-right: 5px;
    margin-bottom: 3px;
    display: inline-block;
}

.archive_songs .song_item .song_count {
	opacity: 1;
	visibility: visible;
	color: #999;
}

.archive_songs .song_item .song_rating {
	width: 130px;
}

.archive_songs .song_item .post_author a,
.archive_songs .song_item .post_author span {
	display: inline-block;
	line-height: 20px;
	color: #555;
	font-size: 13px;
	margin-left: 5px;
}

.archive_songs .song_item .post_author span {
	margin-left: 0;
}

.archive_songs .song_item .post_author a:hover {
	color: #d33;
}

.archive_songs .song_item .post_author img {
	height: 20px;
	width: auto;
}

.archive_songs .song_item .song_info strong {
    line-height: 30px;
    font-size: 18px;
    display: inline-block;
}

.archive_songs .song_item .song_info span {
	display: inline-block;
	line-height: 30px;
	color: #999;
}

.archive_songs .song_item .song_info span a {
	line-height: 30px;
    font-size: 15px;
    display: inline-block;
    font-weight: 600;
}

.archive_songs .song_item .song_info span a:hover {
	color: #d33;
}

.archive_widget {
	background: #fff;
	border-radius: 5px;
	margin-bottom: 30px;
}

.archive_widget .widget_title {
	border-bottom: 1px solid #f2f2f2;
	padding: 0 20px;
}

.archive_widget .widget_title h3 {
	font-size: 20px;
	line-height: 50px;
	margin: 0;
}

.archive_widget .widget_body {
	padding: 20px;
}

.archive_widget .widget_body ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.archive_widget .widget_body ul li {
	display: inline-block;
	width: 50%;
}

.archive_widget .widget_body ul li.current-menu-item a {
	background: #d33!important;
	color: #fff!important;
	border-radius: 5px;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;

}

.archive_widget .widget_body ul li a {
	display: block;
	line-height: 40px;
	color: #999;
	font-weight: 600;
	padding: 0 15px;
	margin-bottom: 5px;
	margin-right: 5px;
}

.archive_widget .widget_body ul li a:hover {
	background: #f2f2f2;
	border-radius: 5px;
	color: #333;
}

.archive_head h1 {
	line-height: 50px;
	font-size: 30px;
	margin: 0;
	margin-bottom: 20px;
}


.single_tab {
	width: 70%;
}

.tab_content {
	background: #fff;
}

.single_tab .post_buttons {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1001;
}

.artist_item {
	background: #fff;
	border-radius: 5px;
	border-bottom: 0;
	margin-bottom: 20px;
	padding: 20px;
}

.artist_item .artist_image {
	margin-bottom: 20px;
}

.artist_item .artist_image img {
	border-radius: 100%;
}

.artist_item .artist_info a {
	color: #111;
}

.artist_item .artist_info a:hover {
	color: #d33;
}

/* ALPHATABS */

.at-cursor-bar { /* Defines the color of the bar background when a bar is played */
    background: rgba(255, 242, 0, 0.25);
}

.at-selection div { /* Defines the color of the selection background */
    background: rgba(64, 64, 255, 0.1)
}

.at-cursor-beat { /* Defines the beat cursor */
    background: rgba(64, 64, 255, 0.75);
    width: 3px;
}

.at-highlight * { /* Defines the color of the music symbols when they are being played (svg) */
    fill: #0078ff;
    stroke: #0078ff;
}

.at-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: flex-start;
}

.at-wrap.loading .at-overlay {
    display: flex;
}

.at-overlay-content {

    margin-top: 20px;
    background: #FFF;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
    padding: 10px;
}

.at-overlay-content > .spinner-border {
    color: #4972a1;
}

.at-wrap {
    position: relative;
    width: 100%;
}

.at-viewport {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 50px 30px;
}

#at_player {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    height: 70px;
    background: #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
    border-radius: 5px;
    padding: 0 5px;
    z-index: 1001;
}

.control_button, .control_dropdown {
    position: relative;
    padding: 0 5px;
}

.control_button > button {
    outline: none;
    width: 35px;
    height: 35px;
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 35px;
    text-align: center;
    color: #555;
    border-radius: 35px;
    font-size: 16px;
}

.control_button > button:hover,
.control_button > button.active,
.control_button.show > button,
.control_dropdown.show > button {
    background: #f2f2f2;
    color: #111;
}

#play_pause {
    border: 0;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #dd3333;
    color: #fff;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    margin: 0 10px;
}

.song_details {
    padding: 0 15px;
}

.song_details .song_title {
    color: #111;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
}

.song_details .song_artist {
    line-height: 20px;
}

.song_time {
    padding: 0 15px;
}

.at-time-slider {
    position: relative;
    width: 100%;
    height: 5px;
    background: #f2f2f2;
}

.at-time-slider-value {
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
    height: 5px;
    background: #d33;
}

.control_dropdown > button {
    line-height: 35px;
    border: 0;
    padding: 0 10px;
    background: transparent;
    border-radius: 5px;
    outline: none;
}

.control_dropdown > button:hover {
    background: #f2f2f2;
}

.control_dropdown > button i {
    margin-right: 5px;
}

/* PAGINATION */

.pagination {
	height: 60px;
	background: #fff;
	border-radius: 5px;
	padding: 10px;
}

.pagination li {
	margin: 0 2px;
}

.pagination li a.disable {
	cursor: not-allowed;
	background: #f2f2f2!important;
	color: #555!important;
}

.pagination li.next a,
.pagination li.prev a {
	background: #f2f2f2;
	width: initial;
	padding: 0 15px;
}

.pagination li.next a:hover,
.pagination li.prev a:hover {
	background: #d33;
	color: #fff;
}

.pagination li a {
	display: inline-block;
	width: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
	font-weight: 600;
	color: #555;
}

.pagination li a:hover {
	background: #f2f2f2;
}

.pagination li.current a {
	background: #d33;
	color: #fff;
}

/* COMMENT */

.comments-area {
	overflow: hidden;
	margin: 0!important;
}

.wpd_label, .wpd-thread-info, 
.wpd-form .wpd-avatar, 
.wpd-form-head, 
.wpd-comment-info-bar, 
.wpd-thread-head, 
.wpd-comment .wpd-reply-to,
#wpdcom .wpd-hidden,
.wpd-login-to-comment {
	display: none!important;
}

.wpd-thread-head {
	border: 0;
}

#wpdcom .wpd-comment .wpd-avatar img, #wpdcom .wpd-comment .wpd-avatar img.avatar {
	width: 40px!important;
	height: 40px!important;
	max-width: initial!important;
	border: 0!important;
	padding: 0!important;
}

#wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .wpd-textarea-wrap {
	flex-basis: 100%;
}

#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea {
	box-shadow: none;
	line-height: 20px;
	border: 1px solid #eaeaea;
}

#wpdcom .wpd-comment .wpd-comment-left {
	width: initial;
	margin-right: 15px;
}

#wpdcom, #wpdcom #wpd-threads {
	padding: 0;
	margin: 0;
}

#wpdcom .wpd-thread-list {
	padding: 20px 0;
}

#wpdiscuz-comment-message {
	top: 70px!important;
	right: 15px;
	width: initial;
}

.ql-container {
	font-family: inherit;
}

#wpdcom .ql-editor::before {
	font-size: 15px;
	font-style: normal;
}

#wpdcom .wpd-comment-header .wpd-comment-author, #wpdcom .wpd-comment-text, #comments #wpdcom span, #respond #wpdcom span, #wpdcom span {
	font-size: 15px;
}

#wpdcom .ql-container {
	border-radius: 5px;
	border: 1px solid #eaeaea;
}

#wpdcom .wpd-reply.wpd_comment_level-2 {
	margin-left: 50px;
}





.mobile_buttons {
	padding: 0;
	margin: 0;
	list-style: none;
}

.mobile_buttons button {
	background: transparent;
    border: 0;
    color: #a2a2a2;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    padding: 0;
}

#mobile_sidebar {
	position: fixed;
	width: 100%;
	height: 100vh;
	right: 0;
	top: 0;
	background: rgb(0 0 0 / 60%);
	opacity: 0;
	visibility: hidden;
	transition: all 300ms;
}

.mobile_menu {
    position: fixed;
    top: 0;
    right: -70%;
    width: 70%;
    height: 100vh;
    background: #222f3e;
    transition: all 300ms;
}

.mobile_menu_body {
	padding: 0 15px;
}

.mobile_menu_body ul {
	list-style: none;
	padding: 20px 0;
	margin: 0;
}

.mobile_menu_body ul li {
	margin-bottom: 10px;
}

.mobile_menu_body ul li i { 
	width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
}

.mobile_menu_body ul li a {
	color: #a2a2a2;
	display: block;
} 

.mobile_menu_body ul li a:hover {
	color: #fff;
}

.mobile_menu .search_form {
	padding: 0!important;
} 

.mobile_menu_header {
	padding: 15px;
}

.mobile_menu_header span {
	line-height: 40px;
	font-size: 16px;
	font-weight: 700;
	color: #a2a2a2;
}

.mobile_menu_header button {
	background: transparent;
	border: 0;
	width: 40px;
	line-height: 40px;
	color: #a2a2a2;
	font-size: 16px;
	padding: 0;
}

body.mobile_menu_active #mobile_sidebar {
	opacity: 1;
	visibility: visible;
}

body.mobile_menu_active .mobile_menu {
	right: 0;
}


.search_form_asp {
	width: auto;
	max-width: 80%;
}

.um-account-tab {
	padding: 30px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0px 10px rgba(0,0,0,.04);
}

.um-account-main div.um-account-heading i {
	display: none;
}

.um-account-main div.um-account-heading {
	font-size: 28px!important;
	line-height: 28px!important;
	padding-bottom: 20px!important;
}

.um-account-side li {
	background: transparent!important;
	border: 0;
}

.um-account-icon, .um-account-arrow, .um-account-meta, .um-profile-edit {
	display: none!important;
}

.um-account-title {
	float: none!important;
	padding: 0!important;
}

.um-account-side {
	width: 25%!important;
}

.um-account-main {
	width: 75%;
}

.um-account-link {
	padding: 10px 20px!important;
	font-weight: 500!important;
	border-radius: 5px;
	font-size: 15px!important;
}

.um-account-link.current .um-account-title, .um-profile-edit {
	color: #fff!important;
}

.um-account-link.current {
	font-weight: 500!important;
	background: #3ba1da;
}

.um-account-link.current:hover {
	background: #3ba1da!important;
}

.um-account-link:hover {
	background: transparent!important;
}

.um-header {
	border: 0!important;
}

.um-form[data-mode="profile"] {
	overflow: hidden;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0px 10px rgba(0,0,0,.04);
}

.um-profile-photo .um-dropdown {
	top: 18px!important;
}

.um-cover {
	background: #b3b3b3!important;
}

@media (max-width: 768px) {  
	.search_form_asp {
    	width: 90%;
	}
 	.single_page {
 		padding: 30px 20px;
 	}
 	.home_songs {
 		padding: 10px;
 	}
 	#main_content.main_single .container-sm {
 		padding: 70px 0;
 	}
 	.single_song, .single_tab {
 		width: 100%;
 		padding: 0;
 	}

 	.at-viewport {
 		padding: 0;
 		overflow-x: hidden;
 	}
 	.single_sidebar {
 		position: relative;
 		top: initial;
 		width: 100%;
 		right: initial;
 	}
 	.single_song .song_content {
 		border: 0;
 	}
 	.single_song .lyric_content {
 		height: initial;
 		overflow: initial;
 		padding: 20px;
 	}

 	.single_song .lyric_toolbar, #at_player {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 0;
 	}

 	.single_song .lyric_toolbar #play_button, #play_pause { 
 		width: 40px;
 		height: 40px;
 	}

 	.single_song .lyric_toolbar #play_button i {
 		line-height: 40px;
 		font-size: 15px;
 	}

 	.single_song .lyric_toolbar .btn-group {
 		padding: 0 10px;
 	}

 	.single_song .lyric_toolbar .btn-group label,
 	.single_song .lyric_toolbar .right_menu > button {
 		display: none;
 	}

 	.site_logo {
 		margin: 0;
 		padding: 0 20px 0 0;
 	}

 	.site_logo:before {
 		display: none;
 	}

 	.pagination li.next a span, .pagination li.prev a span {
	    display: none;
	}
}

@media (max-width: 575px) { 
	.search_form_asp {
    	width: 90%;
	}
	.single_page, .song_archive {
 		padding: 30px 0;
 	}
 	.single_song .lyric_header .song_title {
 		width: 100%;
 	}
 	.post_buttons button {
 		width: 40px;
 		line-height: 40px;
 		overflow: hidden;
 		margin: 0 15px 0 0;

 	}
 	.post_buttons button i {
 		margin: 0;
 	}

 	.info_right {
 		display: none;
 	}

 	.at-viewport {
 		height: calc(100vh - 140px);
 	}

}