body,html {font-family:  sans-serif !important}

/*nav a{font-size:1.5em;}*/

table  {border:1px solid lightgray; border-collapse:collapse; margin-top: 10px;margin-bottom: 10px;}
table th { background: linear-gradient(#EEEEEE, #BBBBBB) }

h1 {padding-top:.5em;}

li {list-style:none;}

.big-icon {font-size:3em;}

div.clear {clear:both;}
.nowrap { white-space: nowrap !important}


/* Nav  */
nav.navbar img.logo {margin-right:5px;}
form.search .form-control { width: auto; }



/* Tunes */
table.tune-list {margin-left:auto; margin-right:auto; width: 85%;}
table.tune-list th {height:2em;cursor:ns-resize;}
    table.tune-list tr a{text-decoration:none; color:black;}
    table.tune-list tr a:visited {
    }


    section.tune-list { 
        text-align: center;
    }

    section.tune { text-align: left; }

table.tune-list td img {cursor:pointer; vertical-align:middle; margin-bottom:3px;}
 img.logo {height:60px;}

  table.tune-list {cursor:pointer;}
 table.tune-list tr:hover {background-color:#DDD}

form.updatetuneform label,
form.addtuneform label,
form.addmusicianform label,
form.updatemusicianform label,
form.addattachmentform label {width: 100px; display:inline-block;}
form.addtuneform div,
form.addattachmentform div {margin-bottom:1px;}

form.attachmentremove {float:left;margin-top:5px; margin-left:10px;}
form.attachmentupdate {float:left;margin-top:5px}

form.updatetuneform {margin-bottom: 10px;border:1px solid gray;width:30em;margin:auto;padding:10px 0px;margin-bottom:10px}

ul.ui-autocomplete.ui-menu{width:300px;list-style:none;}

iframe.youtube {float:left}
ul.attachment-musicians {float:left;padding:0px;margin-left:4px;}
div.overlay-abc { display: none; height:100%;width:100%;position:fixed;z-index:1;top:0px;left:0px;background-color: rgb(255,255,255); padding-top:20px; }
div.overlay-abc div.notation {width:70% !important;padding:10%;margin:auto;}
div.overlay-abc-expand {position:relative;height:50px;width:50px;cursor:pointer;}
div.overlay-abc-close {position:fixed;height:50px;width:50px;top:0px;right:20px;cursor:pointer;z-index:3}
div.overlay-abc text.abcjs-meta-top {margin-bottom:20px;display:block;transform: translate(0px, -50px)}

/*Attachments*/
table.attachments { border: none; padding: 0; }
table.attachments td { border: none; padding: 0; }

form.addattachmentform div.description { display: none; }
form.addattachmentform div.filename {display:none;}
form.addattachmentform div.attachmentdata {display:none;}

.input-group input.file-location { width: 500px; }

form.attachmentremove {display:block;}
form.attachmentupdate {display:block;}
.input-group input.time {width:60px;flex:none;}

div.attachment-spacer {height:50px;}

div.tabcontent { width: 100%; }

form.attachmentremove button.remove {margin-bottom:21px;}
ul.tune-attachments li{display:block;margin-bottom:20px;}
div.tagger {text-align:left; margin-top:10px;}



.tabcontent.active {display:block;}
div.midiplayer {margin-top:12px;margin-left:40px;margin-right:10px;padding-left:20px;}
textarea#attachmentdata.display {border:none;user-select:text}
textarea.abc {width:80%;height:400px;background-color:white;}
textarea#attachmentdata {resize:both;}
img.pdf {width:800px;height:600px;}
/*Ratio 1.2173913 width="420" height="345"*/
iframe.youtube {width:800px; height:493px; border:none;}
iframe.youtube.carousel {width:90%;}
iframe.mp3 { width: 450px; height: 70px; border:none; background-color:white; }
iframe.pdf { width: 600px; height: 400px }

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }


/* Musicians */
img.profileimage { border-radius: 50%;width:120px;height:120px;object-fit:cover;}
img.profileimage.small {width:50px;height:50px;}
ul.musician-list {margin-top:20px;padding:0px;}
ul.musician-list li{list-style:none;float:left;margin-right:40px;margin-top:20px;}
ul.musician-list li img {display:block;text-align:center;margin-left:auto;margin-right:auto;}



 /* Font Awesome */
 i.youtube {color:red;}
  i.mp3 {color:#0069d9;}

ul.musician-attachment-list {margin-top:40px;}
ul.musician-attachment-list li {list-style:none;float:left;width:500px;margin-right:20px;margin-bottom:40px;}

ul.musician-attachment-list li iframe.youtube {width:500px;height:320px;}
 

      
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel { margin-bottom: 4rem;}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

div.carousel-caption > h1 > a:visited {color:lightgray}

/* Declare heights because of positioning of img element */
.carousel-item {

  height: 42rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

@media (max-width: 500px) {
    td.Composer,
    th.Composer {display:none;}
    img.profileimage { width:100px;height:100px;}
    ul.musician-list {padding-left:20px; }
    ul.musician-list li a {text-overflow:clip;white-space:nowrap;}
    ul.musician-list li {width:100px;overflow:hidden;font-size:0.8em}
    table.tune-list {width: 98%;}
    div.overlay-abc div.notation {width:90% !important;padding:5%;}
  
}

@media (min-width: 501px) and (max-width: 1000px) {

    div.overlay-abc div.notation {width:80% !important;padding:5%;}
}

@media (min-width: 501px)  {
    td.Composer,
    th.Composer {display:table-cell;}

}


/* ***************************************************************************************************************************** */
/* Style the tab */
/* ***************************************************************************************************************************** */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/************************ Login  *******************************************/
.login-container { margin-top: 5%; margin-bottom: 5%; }

/*#0062cc;*/
.login-form-2 { padding: 5%; background: #212529; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19); }
    .login-form-2 h3 { text-align: center; color: #fff; }
.login-container form { padding: 10%; }
.btnSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; border: none; cursor: pointer; }
.login-form-2 .btnSubmit { font-weight: 600; color: #212529; background-color: #fff; }
.login-form-2 .ForgetPwd { color: #fff; font-weight: 600; text-decoration: none; }