/* ----------------- chords highlighting --------------*/

.ch
{
    cursor:pointer;
    color:#0067dc;
    TEXT-DECORATION: none; 
}

.item_cr_guitar {
    height:100px;
    width:100px;
}

.item_cr_ukulele {
    height:72px;
    width:100px;
}

.text-center{
    text-align: center;
}

/* ----------------- chords writing --------------*/
.m-chords {
    margin: 0 0 6px 14px;
}

.m-chords  {
    margin-left: -14px;
}

.m-chords .link-fake {
    margin-bottom: 6px;
}

.m-chords--container {
    display: none;
}

.b-chord {
    position: relative;
    color: #444;
    padding: 0 12px 0 0;
    margin: 0 10px 18px;
    height: 86px;
    width: 73px;
}

.b-chord {
    padding-left: 14px;
}

.b-chord--body {
    position: relative;
    padding: 4px 0;
    top:-3px;
}

.b-chord--lines {
    position: relative;
    border-width: 1px 1px 1px 3px;
    border-style: solid;
    width: 73px;
    padding-bottom: 10px;
}

.b-chord--lines .line {
    border-style: solid;
}

.b-chord--lines .line__horisontal {
    height: 11px;
    border-width: 0 0 1px;
    position: relative;
    z-index: 2;
}

.b-chord--lines .line__vertical {
    width: 15px;
    height: 100%;
    border-width: 0 1px;
    border-color: #ebebeb;
    position: absolute;
    left: 41px;
}

.b-chord--lines .line__vertical:first-child {
    left: 13px;
}

.b-chord .text-center {
    margin-bottom: 3px;
}

.b-chord .b-chord--fret {
    font-weight: bold;
    font-size: 0.800em;
    bottom: -16px;
    left: 3px;
    position: absolute;
}

.b-chord--strings .string-disabled>div:after,.b-chord--strings .string-disabled .top,.b-chord--strings .string-disabled .bottom {
    width: 1px;
    height: 1px;
    background: #444;
    position: absolute;
}

.b-chord--strings {
    position: absolute;
    right: 5px;
}

.b-chord--strings .string__t1 {
    top: 2px;
}

.b-chord--strings .string__t2 {
    top: 13px;
}

.b-chord--strings .string__t3 {
    top: 24px;
}

.b-chord--strings .string__t4 {
    top: 35px;
}

.b-chord--strings .string__t5 {
    top: 46px;
}

.b-chord--strings .string__t6 {
    top: 57px;
}

.b-chord--strings .string-disabled {
    padding: 1px;
    position: absolute;
}

.b-chord--strings .string-disabled>div:after {
    content: " ";
}

.b-chord--strings .string-disabled .center {
    width: 1px;
    height: 1px;
    border-width: 1px;
    border-style: dotted;
}

.b-chord--strings .string-disabled .top,.b-chord--strings .string-disabled .bottom {
    left: 0;
}

.b-chord--strings .string-disabled .top:after,.b-chord--strings .string-disabled .bottom:after {
    left: 4px;
}

.b-chord--strings .string-disabled .top {
    top: 0;
    width: 1px;
    height: 1px;
}

.b-chord--strings .string-disabled .bottom {
    bottom: 0;
    width: 1px;
    height: 1px;    
}

.b-chord--fingers .finger .number,.b-chord--fingers .finger .number:after {
    border-color: #fff;
    border-style: solid;
}

.b-chord--fingers .finger__n2 .number,.b-chord--fingers .finger__n3 .number,.b-chord--fingers .finger__n4 .number {
    width: 2px;
    height: 1px;
}

.b-chord--fingers .finger__n2 .number:after,.b-chord--fingers .finger__n3 .number:after,.b-chord--fingers .finger__n4 .number:after {
    width: 2px;
    height: 1px;
    bottom: -3px;
}

.b-chord--fingers {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    top: 0;
}

.b-chord--fingers .finger {
    width: 9px;
    height: 9px;
    position: absolute;
    background: #000;
    background: url(data:image/svg+xml;base64,PHN2ZyAgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjQuNSIgY3k9IjQuNSIgcj0iNC41IiBmaWxsPSIjMDAwMDAwIiAvPjwvc3ZnPg==) no-repeat;
}

.b-chord--fingers .finger__l1 {
    left: 5px;
}

.b-chord--fingers .finger__l2 {
    left: 19px;
}

.b-chord--fingers .finger__l3 {
    left: 33px;
}

.b-chord--fingers .finger__l4 {
    left: 47px;
}

.b-chord--fingers .finger__l5 {
    left: 61px;
}

.b-chord--fingers .finger__t1 {
    top: 0;
}

.b-chord--fingers .finger__t2 {
    top: 11px;
}

.b-chord--fingers .finger__t3 {
    top: 23px;
}

.b-chord--fingers .finger__t4 {
    top: 35px;
}

.b-chord--fingers .finger__t5 {
    top: 47px;
}

.b-chord--fingers .finger__t6 {
    top: 59px;
}

.b-chord--fingers .finger .number {
    position: relative;
    margin: 2px 3px; 
}

.b-chord--fingers .finger .number:after {
    content: " ";
    position: absolute;
}

.b-chord--fingers .finger__n1 .number {
    width: 1px;
    height: 4px;
    border-width: 1px 1px 0 0;
}

.b-chord--fingers .finger__n1 .number:after {
    width: 3px;
    height: 1px;
    bottom: -1px;
    left: 0;
    border-width: 1px 0 0;
}

.b-chord--fingers .finger__n2 .number {
    border-width: 1px 1px 1px 0;    
}

.b-chord--fingers .finger__n2 .number:after {
    left: 0;
    border-width: 1px 0 1px 1px;
}

.b-chord--fingers .finger__n3 .number {
    border-width: 1px 1px 1px 0;   
}

.b-chord--fingers .finger__n3 .number:after {
    left: 0;
    border-width: 1px 1px 1px 0;
}

.b-chord--fingers .finger__n4 .number {
    height: 2px;
    border-width: 0 1px 1px;
}

.b-chord--fingers .finger__n4 .number:after {
    left: 0px;
    height: 2px;
    border-width: 0 1px 0 0;
}

.b-chord--fingers .barre {
    width: 5px;
    height: 100%;
    margin-left: 2px;
    border-radius: 2.5px;
    position: absolute;
    background: #000;
}

.b-chord--fingers .barre__s2 {
    height: 20px;
}

.b-chord--fingers .barre__s3 {
    height: 31px;
}

.b-chord--fingers .barre__s4 {
    height: 42px;
}

.b-chord--fingers .barre__s5 {
    height: 53px;
}

.b-chord--letters .letter[class*="_d"] .last, .b-chord--letters .letter[class*="_e-lg"] .last, .b-chord--letters .letter[class*="_f"] .last {
    display: none;
}

.b-chord--letters .letter .first, .b-chord--letters .letter .last, .b-chord--letters .letter[class*="dz"] .sharp {
    border-style: solid;
}

.b-chord--letters .letter .first:after, .b-chord--letters .letter .last:after, .b-chord--letters .letter[class*="dz"] .sharp:after {
    content: " ";
    position: absolute;
}

.b-chord--letters {
    position: absolute;
    left: 0;
    top: 15px;
}

.b-chord--letters .letter {
    position: relative;
    width: 5px;
    height: 7px;
    margin-bottom: 4px;
}

.b-chord--letters .letter .first:after, .b-chord--letters .letter .last:after {
    background: #444;
}

.b-chord--letters .letter .first {
    position: relative;
}

.b-chord--letters .letter .last {
    position: absolute;
}

.b-chord--letters .letter[class*="_e-sm"] {
    padding: 1px 0;
}

.b-chord--letters .letter[class*="_e-sm"] .first {
    width: 3px;
    height: 3px;
    left: 1px;
    border-width: 1px 0;
}

.b-chord--letters .letter[class*="_e-sm"] .first:after {
    width: 1px;
    height: 1px;
    left: 3px;
    top: 3px;
}

.b-chord--letters .letter[class*="_e-sm"] .last {
    width: 3px;
    height: 1px;
    top: 2px;
    border-width: 0 1px 1px;
}

.b-chord--letters .letter[class*="_e-sm"] .last:after {
    width: 1px;
    height: 1px;
    left: -1px;
    top: 2px;
}

.b-chord--letters .letter[class*="_b"] .first {
    width: 3px;
    height: 5px;
    border-width: 1px 0 1px 1px;
}

.b-chord--letters .letter[class*="_b"] .last {
    width: 1px;
    height: 1px;
    right: 0;
    top: 1px;
    border-width: 2px 0;
}

.b-chord--letters .letter[class*="_b"] .last:after {
    width: 3px;
    height: 1px;
    right: 1px;
}

.b-chord--letters .letter[class*="_g"] .first {
    width: 3px;
    height: 5px;
    left: 1px;
    border-width: 1px 0;
}

.b-chord--letters .letter[class*="_g"] .first:after {
    width: 3px;
    height: 1px;
    left: 1px;
    top: 2px;
}

.b-chord--letters .letter[class*="_g"] .last {
    width: 1px;
    height: 2px;
    right: 0;
    top: 1px;
    border-width: 1px 0 2px;
}

.b-chord--letters .letter[class*="_g"] .last:after {
    width: 1px;
    height: 5px;
    right: 4px;
    top: -1px;
}

.b-chord--letters .letter[class*="_d"] .first {
    width: 3px;
    height: 5px;
    border-width: 1px 0 1px 1px;
}

.b-chord--letters .letter[class*="_d"] .first:after {
    width: 1px;
    height: 100%;
    left: 3px;
}

.b-chord--letters .letter[class*="_a"] .first {
    width: 3px;
    height: 2px;
    left: 1px;
    border-width: 1px 0;
}

.b-chord--letters .letter[class*="_a"] .last {
    width: 3px;
    height: 6px;
    top: 1px;
    border-width: 0 1px;
}

.b-chord--letters .letter[class*="_e-lg"] .first {
    height: 5px;
    border-width: 1px 0 1px 1px;
}

.b-chord--letters .letter[class*="_e-lg"] .first:after {
    width: 4px;
    height: 1px;
    top: 2px;
}

.b-chord--letters .letter[class*="_f"] .first {
    height: 7px;
    border-width: 1px 0 0 1px;
}

.b-chord--letters .letter[class*="_f"] .first:after {
    width: 4px;
    height: 1px;
    top: 2px;
}

.b-chord--letters .letter[class*="_c"] .first {
    width: 3px;
    height: 5px;
    left: 1px;
    border-width: 1px 0;
}

.b-chord--letters .letter[class*="_c"] .first:after {
    display: none;
}

.b-chord--letters .letter[class*="_c"] .last {
    width: 1px;
    height: 3px;
    right: 0;
    top: 1px;
    border-width: 1px 0;
}

.b-chord--letters .letter[class*="_c"] .last:after {
    width: 1px;
    height: 5px;
    right: 4px;
    top: -1px;
}

.b-chord--letters .letter[class*="dz"] .sharp {
    width: 3px;
    height: 6px;
    position: absolute;
    left: 7px;
    top: 1px;
    border-width: 0 1px;
}

.b-chord--letters .letter[class*="dz"] .sharp:after {
    width: 5px;
    height: 4px;
    top: 1px;
    left: -2px;
    border-style: solid;
    border-width: 1px 0;
}

.b-chord {
    margin: 0 0 12px;
}

/* ----------------- CHORDS CAROUSEL AND POPOVER --------------*/

.carousel {
    position: relative;
    display: inline-block;
    padding: 0 15px 28px;
    margin-bottom: 0px;
}

.popover .carousel {
    margin: 9px 4px 0;
}

/* .carousel-indicators, .carousel-control {
-webkit-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
filter: alpha(opacity=0);
opacity: 0;
}

.carousel-indicators, .carousel-control {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}*/

.carousel-indicators {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0 0 0 40px;
    width: 100%;
    bottom: 12px;
    left: 0;
    text-align: center;
    height: 10px;
    line-height: 6px;
    font-size: 0;
    z-index: 4;
    top: 104px;
}

.carousel-indicators>li {
    -webkit-transition: all .125s linear;
    transition: all .125s linear;
    width: 6px;
    height: 6px;
    margin: 2px;
    background: #d6d6d6;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.carousel-indicators>li:hover {
    background: #c0c0c0;
}

.carousel-indicators>.active,.carousel-indicators>.active:hover {
    background: #77a8f4;
    cursor: default;
    display: inline-block;
}

.carousel-indicators>.item{
    display: inline-block;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: ease-in-out .25s left;
    transition: ease-in-out .25s left;
}

.carousel-inner>img,.carousel-inner>a>img {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
    line-height: 1;
}

.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev {
    display: block;
}

.carousel-inner>.active {
    left: 0;
}

.carousel-inner>.next,.carousel-inner>.prev {
    position: absolute;
    top: 0;
    width: 100%;
}

.carousel-inner>.next {
    left: 100%;
}

.carousel-inner>.prev {
    left: -100%;
}

.carousel-inner>.next.left,.carousel-inner>.prev.right {
    left: 0;
}

.carousel-inner>.active.left {
    left: -100%;
}

.carousel-inner>.active.right {
    left: 100%;
}

.carousel .b-chord {
    margin: 0 0 12px;
}

.carousel-control {
    position: absolute;
    bottom: 9px;
    z-index: 4;
    top: 82%;

    left: 15px;
    width: 15px;
    height: 15px;
    margin-top: auto;
    font-size: 0.933em;
    font-weight: 100;
    line-height: 14px;
    color: #ffffff;
    text-align: center;
    background: #fff;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;

}

a.carousel-control:link,
a.carousel-control:hover,
a.carousel-control:visited
{
    color: #000;
}

a .carousel-control.left {
    left: 0;
}

a .carousel-control.right {
    right: 11px;
}

.carousel:first-child .carousel-control.left {
    left: 11px;
}

.carousel:first-child .carousel-indicators {
    padding-right: 0;
}

.carousel .close {
    display: none;
}

.carousel.ukulele .carousel-indicators
{
    top: 80px;
    left: -10px; 
}
.carousel.ukulele .carousel-inner
{
    height: 75px; 
}

#modChord.modal {
    width: 130px;
    margin-left: -20px;
}

#modChord .modal-body {
    position: relative;
    max-height: 400px;
    overflow-y: visible; 
}

.modal-body{
    padding:0;
}

button.close {
    padding: 1px 6px;
}

#modChord.modal.fade.in {
    top: 30%;
}