/*
 * ANGULAR
 */


@media print {
  body * {
    visibility: hidden;
  }
  .container-search {display:none;}
  .artist {display:none;}
	  .mar-bottom {display:none;}
	  .main-footer {display:none;}
	  .chords-control {display:none;}
	  .col-md4 {display:none;}
	  .col-lg-4 {display:none;}
	  .bg-white {display:none;}
	  .btn-bg-mode {display:none;}
	  
  pre * {
    visibility: visible;
  }
  
  span * {
    visibility: visible;
  }
  
  
  
  .page-title * {
    visibility: visible;
  }
  
  .title {
	  font-size: 22px;
	  margin-bottom: -30px;
  }


}

/*
	  Allow angular.js to be loaded in body, hiding cloaked elements until
	  templates compile.  The !important is important given that there may be
	  other selectors that are more specific or come later and might alter display.
	 */

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

.note-editor {
  border: 1px solid #d2d6de;
}

.hand {
  cursor: pointer;
}

.font-monospace {
  font-family: monospace;
}

.option-selection .chosen-container.chosen-container-single {
  width: 100% !important;
}

.chosen-container-single .chosen-single {
  border-radius: 0;
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #ccc;
  box-shadow: none;
}

.chosen-container .chosen-drop {
  border-color: #cccccc;
  border-top: 1px solid #eee;
  box-shadow: none;
  border-radius: 0;
}

.chosen-container .chosen-results {
  margin: 0;
  padding: 0;
}

.min-height {
  min-height: 200px;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.text-normal {
  font-weight: normal;
}

.display-block {
  display: block;
}

.bg-white {
  background-color: #ffffff !important;
}

.first-letter-uppercase {
  display: inline-block;
}

.first-letter-uppercase:first-letter {
  text-transform: uppercase;
}

.mar-no {
  margin: 0;
}

.mar-left {
  margin-left: 12px;
}

.mar-left.mar-10 {
  margin-left: 10px;
}

.mar-left.mar-8 {
  margin-left: 8px;
}

.mar-left.mar-6 {
  margin-left: 6px;
}

.mar-left.mar-4 {
  margin-left: 4px;
}

.mar-left.mar-2 {
  margin-left: 2px;
}

.mar-left.mar-0 {
  margin-left: 0 !important;
}

.mar-right {
  margin-right: 12px;
}

.mar-right.mar-10 {
  margin-right: 10px;
}

.mar-right.mar-8 {
  margin-right: 8px;
}

.mar-right.mar-6 {
  margin-right: 6px;
}

.mar-right.mar-4 {
  margin-right: 4px;
}

.mar-right.mar-2 {
  margin-right: 2px;
}

.mar-right.mar-0 {
  margin-right: 0 !important;
}

.mar-bottom {
  margin-bottom: 12px;
}

.mar-bottom.mar-10 {
  margin-bottom: 10px;
}

.mar-bottom.mar-8 {
  margin-bottom: 8px;
}

.mar-bottom.mar-6 {
  margin-bottom: 6px;
}

.mar-bottom.mar-4 {
  margin-bottom: 4px;
}

.mar-bottom.mar-2 {
  margin-bottom: 2px;
}

.mar-bottom.mar-0 {
  margin-bottom: 0 !important;
}

.mar-top {
  margin-top: 12px;
}

.mar-top.mar-10 {
  margin-top: 10px;
}

.mar-top.mar-8 {
  margin-top: 8px;
}

.mar-top.mar-6 {
  margin-top: 6px;
}

.mar-top.mar-4 {
  margin-top: 4px;
}

.mar-top.mar-2 {
  margin-top: 2px;
}

.mar-top.mar-0 {
  margin-top: 0 !important;
}

.pad-no {
  padding: 0;
}

.pad-left {
  padding-left: 12px;
}

.pad-left.pad-10 {
  padding-left: 10px;
}

.pad-left.pad-8 {
  padding-left: 8px;
}

.pad-left.pad-6 {
  padding-left: 6px;
}

.pad-left.pad-4 {
  padding-left: 4px;
}

.pad-left.pad-2 {
  padding-left: 2px;
}

.pad-left.pad-0 {
  padding-left: 0 !important;
}

.pad-right {
  padding-right: 12px;
}

.pad-right.pad-10 {
  padding-right: 10px;
}

.pad-right.pad-8 {
  padding-right: 8px;
}

.pad-right.pad-6 {
  padding-right: 6px;
}

.pad-right.pad-4 {
  padding-right: 4px;
}

.pad-right.pad-2 {
  padding-right: 2px;
}

.pad-right.pad-0 {
  padding-right: 0 !important;
}

.pad-bottom {
  padding-bottom: 12px;
}

.pad-bottom.pad-10 {
  padding-bottom: 10px;
}

.pad-bottom.pad-8 {
  padding-bottom: 8px;
}

.pad-bottom.pad-6 {
  padding-bottom: 6px;
}

.pad-bottom.pad-4 {
  padding-bottom: 4px;
}

.pad-bottom.pad-2 {
  padding-bottom: 2px;
}

.pad-bottom.pad-0 {
  padding-bottom: 0 !important;
}

.pad-top {
  padding-top: 12px;
}

.pad-top.pad-10 {
  padding-top: 10px;
}

.pad-top.pad-8 {
  padding-top: 8px;
}

.pad-top.pad-6 {
  padding-top: 6px;
}

.pad-top.pad-4 {
  padding-top: 4px;
}

.pad-top.pad-2 {
  padding-top: 2px;
}

.pad-top.pad-0 {
  padding-top: 0 !important;
}

.navbar {
  background-color: #191919 !important;
}

.navbar .navbar-brand {
  color: #ffb400;
  font-size: 20px;
  /* margin-top: -8px; */
}

.navbar .navbar-brand .navimg {
  width: 42px;
  display: inline-block;
  margin-top: -3px;
}

.navbar .navbar-nav li {
  margin-left: 3px;
}

.navbar .navbar-nav li:hover,
.navbar .navbar-nav li.active {
  background: #2f2f2f;
}

.navbar .navbar-nav li:hover a,
.navbar .navbar-nav li.active a {
  color: #f6f6f6;
}

.navbar .navbar-nav li a {
  color: #ffe7ad !important;
}

.navbar .navbar-nav li a i {
  color: #e4a100 !important;
}

.artist-details-container .artist-img {
  border: 1px solid #fff;
  display: inline-block;
  width: 180px;
  float: left;
  margin-right: 20px;
  background-color: #fff;
}

.artist-details-container .artist-detail {
  float: left;
}

.artist-details-container .artist-detail .title {
  color: #ffb400;
}

.artist-details-container .artist-detail .details {
  color: #eee;
}

.artist-details-container .artist-detail .details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.artist-details-container .artist-detail .details ul li {
  font-size: 13px;
}

.artist-details-container .artist-detail .details ul li span {
  color: #828282;
  font-style: italic;
}

.content-wrapper {
  background-color: #1e1e1e;
  color: #fff;
  border-left: none !important;
}

.box {
  background: #232323;
  border-radius: 7px 0;
  border: 1px solid #2b2b2b;
}

.page-static-content .page-title {
  color: #ffb400;
  font-size: 18px !important;
}

.page-static-content h3 {
  font-size: 26px !important;
}

.page-static-content .page-content {
  font-size: 13px;
  color: #d6d6d6;
  padding-left: 32px;
}

.container-title,
.container-search {
  padding: 32px 100px;
  /* modules/search.css */
}

.container-title input,
.container-search input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
}

.container-title .form-search,
.container-search .form-search {
  text-align: center;
}

.container-title .form-search .field-alpha,
.container-search .form-search .field-alpha {
  margin-top: 3px;
}

.container-title .form-search .field-alpha ul,
.container-search .form-search .field-alpha ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.container-title .form-search .field-alpha ul li,
.container-search .form-search .field-alpha ul li {
  display: inline-block;
  margin: 0 3px;
}

.container-title .form-search .field-alpha ul li a,
.container-search .form-search .field-alpha ul li a {
  font-size: 19px;
  color: #ffb400;
}

.container-title .form-search .field-alpha ul li a:hover,
.container-search .form-search .field-alpha ul li a:hover {
  color: #da9f13;
}

.container-title .form-search .form-field,
.container-search .form-search .form-field {
  background-color: #42454e;
  border-radius: 4px;
  font-size: 18px;
  padding: 6px 8px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container-title .form-search .form-field .select,
.container-search .form-search .form-field .select {
  color: #1e1e1e;
  padding: 6px 10px;
  border: none;
  border-right: 1px solid #b3b3b3;
}

.container-title .form-search .form-field .input-search,
.container-search .form-search .form-field .input-search {
  background-color: #fff;
  color: #1e1e1e;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 8px 16px;
  text-align: left;
}

.container-title .form-search .form-field .input-submit,
.container-search .form-search .form-field .input-submit {
  background-color: #ffb400;
  color: #fff;
  font-weight: bold;
  margin-left: 8px;
  padding: 6px 10px;
}

.container-title .form-search .form-field .input-submit:hover,
.container-search .form-search .form-field .input-submit:hover {
  background-color: #da9f13;
}

.container-title.on-content,
.container-search.on-content {
  padding: 0;
  text-align: left;
}

.container-title.on-content .form-search,
.container-search.on-content .form-search {
  text-align: left;
  margin-bottom: 15px;
}

.container-title.on-content .form-search .field-alpha,
.container-search.on-content .form-search .field-alpha {
  margin-top: 3px;
}

.container-title.on-content .form-search .field-alpha ul li,
.container-search.on-content .form-search .field-alpha ul li {
  margin: 0 3px;
}

.container-title.on-content .form-search .field-alpha ul li a,
.container-search.on-content .form-search .field-alpha ul li a {
  font-size: 14px;
}

.container-title {
  font-size: 59px;
  text-align: center;
}

.sort-selection {
  float: right;
  margin-top: -3px;
  font-size: 11px;
}

.sort-selection span {
  border: none !important;
}

.sort-selection select {
  padding: 4px;
  background: #232323;
  color: #afafaf;
  border: 1px solid #171717;
  border-radius: 0 !important;
  margin: 0 1px;
  font-size: 12px;
}

.sort-selection select:hover {
  color: #ffffff;
  border-color: #333333;
}

.container-content {
  border-top: 1px solid #3a3a3a;
  padding: 20px 0;
}

.container-content .page-title {
  font-size: 32px;
  margin-top: -8px;
  margin-bottom: 12px;
}

.container-content .page-title .artist {
  font-size: 18px;
  color: #6d6d6d;
}

.container-content .page-title .artist a {
  color: #ffb400;
}

.container-content .page-title .labeled {
  font-size: 12px;
  color: #6d6d6d;
}

.container-content .page-title .labeled span {
  color: #ffb400;
}

.container-content .chords-img-vertical {
  width: 100%;
  height: 120px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #818181;
}

.container-content .main-content {
  color: #fff;
}

.container-content .main-content .content-label {
  font-size: 20px;
  border-bottom: 1px solid #ffb400;
  margin-bottom: 12px;
  padding-bottom: 3px;
  color: #ffe7ad;
}

.container-content .main-content .content-label span {
  border-bottom: 2px solid #ffb400;
  padding-bottom: 4px;
}

.container-content .main-content .youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.container-content .main-content .youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-content .main-content .youtube-embed .video-not-available {
  text-align: center;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  color: #a5a5a5;
  margin-top: -6px;
  font-size: 18px;
  font-family: monospace;
}

.container-content .main-content .youtube-embed .video-not-available i {
  margin-right: 6px;
}

.container-content .main-content .container-chords {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #1e1e1e;
  font-size: 13px;
  position: relative;
  padding: 12px;
}

.container-content .main-content .container-chords pre {
  font-family: monospace;
  white-space: pre;
  word-break: break-all;
  color: #ececec;
  border: none;
  padding: 0;
  background-color: transparent;
}

.container-content .main-content .container-chords pre .scale-key {
  color: #ffe7ad;
  font-weight: bold;
}

.container-content .main-content .container-chords .btn-bg-mode {
  position: absolute;
  top: 4px;
  right: 4px;
}

.container-content .main-content .container-chords .btn-bg-mode button {
  opacity: 0.6;
  border-radius: 6px;
  border: 1px solid #fff;
  background-color: #1e1e1e;
  font-size: 22px;
  padding: 0;
  width: 32px;
  color: #fff;
}

.container-content .main-content .container-chords.night-mode .btn-bg-mode button:hover,
.container-content .main-content .container-chords.night-mode .btn-bg-mode button.active {
  color: #ffb400;
  opacity: 0.9;
}

.container-content .main-content .container-chords.light-mode {
  background-color: #ffffff;
  border-radius: 4px;
}

.container-content .main-content .container-chords.light-mode pre {
  color: #1e1e1e;
}

.container-content .main-content .container-chords.light-mode pre .scale-key {
  color: #1d4fe6 !important;
}

.container-content .main-content .container-chords.light-mode .btn-bg-mode button {
  color: #ffb400;
  opacity: 0.9;
  border: 1px solid #1e1e1e;
}

.container-content .main-content .container-chords.light-mode .btn-bg-mode button:hover,
.container-content .main-content .container-chords.light-mode .btn-bg-mode button.active {
  color: #ffffff;
  background-color: #1e1e1e;
}

.container-content .main-content .content-list .artist-lists,
.container-content .main-content .content-list .song-lists {
  list-style: none;
  padding: 0;
  margin: 0;
}

.container-content .main-content .content-list .artist-lists li,
.container-content .main-content .content-list .song-lists li {
  display: block;
  border-left: 2px solid #404040;
  padding-left: 14px;
  margin-top: 3px;
  border-bottom: 1px dashed #232323;
  padding-bottom: 3px;
}

.container-content .main-content .content-list .artist-lists li a,
.container-content .main-content .content-list .song-lists li a {
  color: #ffffff;
}

.container-content .main-content .content-list .artist-lists li a.artist,
.container-content .main-content .content-list .song-lists li a.artist {
  display: block;
  font-size: 12px;
  color: #868686;
}

.container-content .main-content .content-list .artist-lists li a.artist:before,
.container-content .main-content .content-list .song-lists li a.artist:before {
  content: '- ';
}

.container-content .main-content .content-list .artist-lists li a.artist.no-content:before,
.container-content .main-content .content-list .song-lists li a.artist.no-content:before {
  content: '';
}

.container-content .main-content .content-list .artist-lists li a:hover,
.container-content .main-content .content-list .song-lists li a:hover {
  color: #bdbdbd;
}

.container-content .main-content .content-list .artist-lists li:hover,
.container-content .main-content .content-list .song-lists li:hover {
  background-color: #292929;
}

.container-content .main-content .video-lists {
  margin-top: 18px;
}

.container-content .main-content .video-lists .video-content-list a {
  position: relative;
  color: #868686;
}

.container-content .main-content .video-lists .video-content-list a .title {
  font-size: 12px;
  height: 19px;
  overflow: hidden;
  margin-bottom: 5px;
}

.container-content .main-content .video-lists .video-content-list a:hover {
  color: #bdbdbd;
}

.container-content .main-content .chords-control .btn-chords-container {
  padding: 0 3px;
}

.container-content .main-content .chords-control .btn-chords-container .chords-label {
  background: #232323;
  color: #afafaf;
  border: 1px solid #171717;
  font-size: 12px;
  padding: 7px;
  height: 33px;
  position: relative;
  margin: 3px 0;
}

.container-content .main-content .chords-control .btn-chords-container .chords-label i {
  color: #ffb400;
}

.container-content .main-content .chords-control .btn-chords-container .chords-label:hover {
  background: #272727;
}

.container-content .main-content .chords-control .btn-chords-container .chords-btn-control {
  position: absolute;
  top: -1px;
  right: 1px;
}

.container-content .main-content .chords-control .btn-chords-container .chords-btn-control .btn-font-size,
.container-content .main-content .chords-control .btn-chords-container .chords-btn-control .btn-transpose {
  border-radius: 0;
  border: 1px solid #171717;
  background-color: #232323;
  padding: 6px;
  line-height: 19px;
  width: 32px;
  margin: 0px -2px;
}

.container-content .main-content .chords-control .btn-chords-container .chords-btn-control .btn-font-size .font-size-color,
.container-content .main-content .chords-control .btn-chords-container .chords-btn-control .btn-transpose .font-size-color {
  color: #828282;
}

.container-content .main-content .chords-control .btn-chords-container .chords-btn-control .btn-font-size:hover,
.container-content .main-content .chords-control .btn-chords-container .chords-btn-control .btn-transpose:hover {
  background-color: #2f2f2f;
}

.main-footer {
  background-color: #191919 !important;
  border: none !important;
  font-size: 13px;
}

.main-footer a {
  color: #ffe7ad !important;
}

.main-footer a:hover {
  color: #e4a100;
  text-decoration: underline;
}

.pagination li span,
.theme-pagination li span,
.pagination li a,
.theme-pagination li a {
  background: #232323;
  color: #afafaf;
  border: 1px solid #171717;
  border-radius: 0 !important;
  margin: 0 1px;
  font-size: 12px;
}

.pagination li span:hover,
.theme-pagination li span:hover,
.pagination li a:hover,
.theme-pagination li a:hover {
  color: #1e1e1e;
  background-color: #ffb400;
  border-color: #ffd36a;
}

.pagination li.disabled span,
.theme-pagination li.disabled span,
.pagination li.disabled a,
.theme-pagination li.disabled a {
  background: #333333;
  color: #757575;
  border: 1px solid #1f1f1f;
  border-radius: 0 !important;
  margin: 0 1px;
  font-size: 12px;
}

.pagination li.disabled span:hover,
.theme-pagination li.disabled span:hover,
.pagination li.disabled a:hover,
.theme-pagination li.disabled a:hover {
  background: #333333;
  color: #757575;
  border: 1px solid #1f1f1f;
}

.pagination li.active span,
.theme-pagination li.active span,
.pagination li.active a,
.theme-pagination li.active a {
  color: #1e1e1e;
  background-color: #ffb400;
  border-color: #ffd36a;
}

.pagination li.active span:hover,
.theme-pagination li.active span:hover,
.pagination li.active a:hover,
.theme-pagination li.active a:hover {
  color: #1e1e1e;
  background-color: #ffb400;
  border-color: #ffd36a;
}

@media (max-width: 991px) {
  .container {
    width: 95%;
  }

  .container-search {
    padding: 32px 32px;
  }

  .container-search .field-alpha ul li a {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  .navbar-toggle {
    color: #ffb400 !important;
  }

  .navbar-custom-menu {
    right: 62px !important;
  }

  .container-search {
    padding: 32px 12px;
  }

  .container-search .form-field .select {
    display: block;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 5px;
  }

  .container-search .form-field .input-search {
    display: block;
    width: 100%;
    margin-bottom: 5px;
  }

  .container-search .form-field .input-submit {
    display: block;
    width: 100%;
    margin: 0 !important;
  }

  .sort-selection {
    float: none;
    margin-top: 7px;
    margin-bottom: 2px;
  }

  .sort-selection span {
    display: none;
  }

  .sort-selection select {
    width: 100%;
  }
}