/* Generated by Fontie - the magic webfont generator <http://fontie.flowyapps.com> */
.index-back {
top: 150px;
left: 0;
position: fixed;
z-index: 1;
}

.NotationsAutoComplete
{
font-size:15px;
font-weight:bolder;
}

.TablaAutoComplete
{
font-size:15px;
font-weight:bolder;
}

table td.VMPlyrics
{
font-size:15px;
background-color: #E0FFFF;
width:auto;
margin:auto;
text-align:left;
border:1px solid silver;
padding:8px;
line-height:25px;
padding:8px;
line-height:25px;
color:#333;
white-space: nowrap;
font-weight:bolder;
}

table td.VMPlyricsPreview
{
font-size:9px;
background-color: #E0FFFF;
width:auto;
margin:auto;
text-align:left;
border:1px solid silver;
padding:4px;
line-height:12px;
padding:4px;
line-height:12px;
color:#333;
white-space: nowrap;
font-weight:bolder;
}

table td.VMPlyricsSel
{
font-size:15px;
background-color: #428bca;
width:auto;
margin:auto;
text-align:left;
border:1px solid silver;
padding:8px;
line-height:25px;
padding:8px;
line-height:25px;
color:#E0FFFF;
white-space: nowrap;
font-weight:bolder;
}

table td.VMPtag
{
font-size:12px;
width:auto;
margin:auto;
text-align:left;
border:1px solid silver;
padding:8px;
line-height:25px;
padding:8px;
line-height:25px;
color:#333;
white-space: nowrap;
font-weight:bolder;
}

table td.VMPtagPreview
{
font-size:9px;
width:auto;
margin:auto;
text-align:left;
border:1px solid silver;
padding:4px;
line-height:25px;
padding:4px;
line-height:12px;
color:#333;
white-space: nowrap;
font-weight:bolder;
}

ul.auto-list { 
 display:none;position:absolute;top:0px;left:0px;border:1px solid #C0C0C0;
 background-color:#fff;padding:0px;margin:0;list-style:none;
 min-width:200px;
}
ul.auto-list>li:hover,ul.auto-list>li[data-selected=true]{background-color:#b8e1f5;}

ul.auto-list>li{border:0; cursor:default;padding:2px; padding:5px; background-repeat:no-repeat;
 background-position:center left;
}

mark{font-weight:bold; background-color: #b8e1f5;}

.notations-slide {
z-index:10000;
padding: 5px;
width: 550px;
height:auto;
background: #f2f2f2;
border: #29216d 1px solid;
}
.DivWithScroll{
height:250px;
overflow:scroll;
overflow-x:hidden;
}
.TblScroll{
height:auto;
overflow-y:auto;
}
.autooverflow {overflow:auto;}
.bckclr{
background-color:whitesmoke;
}

.verticalline {
    border-left: 2px solid black;
    height: 10px;
	width: 2px;
    position: relative;
    align: right;
    margin-right: px;
    top: 0;
}


#menu-toggle {
top: 150px;
right: 0;
position: fixed;
z-index: 1;
}

.toggle {
margin: 5px 5px 0 0;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #4CAF50;
    cursor: pointer;
}

body {
	padding-top: 0px;
}
div.footer-1 {
   position: fixed;
   left: 0;
   right: 0;
   margin-left:0;
   bottom: 0;
   width: 100%;
   text-align: center;
   padding-top: 10px;
    font-size: 15px;
z-index: 990;
background-color:#523f6d;
color:white;
}

.main-settings {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    font-size: 15px;
    z-index: 990;
    background-color: #523f6d;
    color: #fff;
}

.piano-div {
    position: fixed;
    left: 5px;
    right: 5px;
    bottom: 0;
    z-index: 10;
    height: 100px;
    margin-bottom: 42px;
}

.keyBoardDiv {
  position: fixed;
  z-index: 10000;
 bottom:0;
 background-color: black; 
 color:white;
 border: 1px solid #d3d3d3; 
 font-weight:bolder;
 display:none;
 left:0;
 }

.keyBoardDivHeader {
 /*cursor: move;
 z-index: 10;*/
 }

.sidenav {
    height: 80%;
    width: 0px;
    top:55px;
    bottom:20%;
    position: fixed;
    padding:10px 0px 10px 0px;
    z-index: 1;
    right: 0;
    background-color: #f2f2f2;
    overflow-x: hidden;
    transition: 0.5s;
    overflow:auto;
    z-index: 1000;
    border:1px;	
}

/*
.sidenav div, .sidenav li {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
   font-size: 17px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
} */

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../vm_resources/vm_img/Preloader_2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}