@font-face {
    font-family: 'tSRL';
    font-weight: 200;
    font-style: normal;
    src: url("../fonts/tSRL.woff2") format('woff2'), url("../fonts/tSRL.ttf") format('truetype');
  }
  a {
    text-decoration: none;
}
a:not( .dropdown-item, .btn){
    color: #36454F;
}
a:not(.dropdown-item, .btn):hover {
 color: steelblue;
}

.abcjs-silent {
    fill:darkgray;
}
.abcjs-cursor {
    stroke:#0a9ecc;
    }
.abcjs-great {
    fill:green;
    }
.abcjs-good {
    fill:rgba(0, 128, 0, 0.80);
    }
.abcjs-okay {
    fill: rgba(100, 128, 0, 0.6);
    }
.abcjs-highlight {
    fill: #0a9ecc;
    }

.abcjs-poor {
    fill:rgba(218, 165, 32, 0.70);
    }
.abcjs-bad {
    fill: rgba(255, 102, 0, 0.8);
    }
.abcjs-miss {
    fill: red;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    }
.accordion-button {
    background-color: white;
}
.bi-tsrl {
    font-size: 2.1em;
}
.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}
.btn-light {
    outline: 1px solid lightgrey;
}
.btn-light:hover{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.btn-nav {
  margin-top: 8px;
  margin-left: 4px;
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: 1;
  border-radius: .2rem;
  border:rgb(50,50,50) 1px solid;
  color: rgb(50,50,50);
}
.btn-nav:hover{
    color:white;
    background:steelblue;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.btn-title, .btn-title:hover {
    border: solid#0d6efd 1px;
    background:white;
}

body {
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding-bottom: 40px; 
    box-sizing: border-box;
    background-color: white;
    /*background-image: url(/static/img/tsrl-music-tile.webp);*/
    font-family: Tahoma, sans-serif;
   /*
        background-image: radial-gradient(circle at center,rgba(240, 248, 255, 0.15),90%,rgba(0, 0, 0, 0.25)); 
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;*/
  }
.bump-ups {
    position: relative;
    top: -40px;
    z-index: -1;
}
.card, .accordion {
    box-shadow: rgba(0, 0, 0, 0.16) 1px 4px 8px, rgba(0, 0, 0, 0.23) 1px 4px 8px;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.card:hover{
    box-shadow: rgba(0, 0, 0, 0.16) 1px 8px 10px, rgba(0, 0, 0, 0.23) 1px 8px 10px;
}

.card.bottom-rounded {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;   
}

.card .star-rating:not(span) {
    position: absolute;
    top: -15px;
    right: 24px;
    }
.hoverlight:hover {
    background-color: aliceblue;
}

.icon-tilt {
    display:inline-block;
    transform: rotate(-4deg);
}

.circle-icon {
    display:inline-block;
    transform: rotate(-4deg);
    font-size:xx-large;
    color:#63b8ee;
}
.teacher{
    color:  rgb(70, 180, 138);
}
.library {
    color: goldenrod;
}

.student {
    color: purple;
}
.count-in{
    position:absolute;
    
    color:red;
    font-size:large;
}
.dropdown-menu {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
footer {
    margin-top:40px;
        position: absolute;
       width:100%;
       min-height: 40px;
       bottom: 0px;
       left:0;
        background: ghostwhite;
    border-top: #36454F 1px solid;
  }
h1 {
    color: rgb(85, 162, 226);
}
h1 .muted {
color:#A9A9A9;
}
h2 {
    margin-top: 10px;
}
input.accept{
    accent-color: green;
}
input.reject{
    accent-color: red;
}
.jumbo {
    font-size:6vw;
}
.music-menu {
    position:relative;
    left: 16px;
    bottom: -6px;
}
nav {
    height: 40px;
    border-bottom: thin solid grey;/* rgb(24, 210, 24);*/
}
.nav1 {
    background-color:white;/* #e3f2fd;*/
    padding-left: 10px;
    padding-right: 10px;
}
.nav2 {
    background-color: whitesmoke;
    top:40px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-bottom: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 31;
}

.paper-wrapper {
    position:relative;
    background:white;
    border:1px solid grey;
    border-radius: 8px;
    z-index:300;
}
.round-add {
    border-radius: 24px;
  
}
.star-rating {
    color:gold;
    text-shadow: 1px 1px 1px grey;
    white-space: nowrap;
}
.text-big{
    font-size: 80px;
}
.text-title{
    font-size: large;
    font-weight: bold;
}
.star-exercise{
    position:absolute;
    top:-16px;
    right:20px;
    font-size:18px;
}
.subtitle {
    color:#36454F;
    font-style: italic;
    position: relative;
    backdrop-filter: blur(5px);
}
.text-black {
    color: grey;
}
.text-blue {
    color:rgb(104, 187, 255);
}
.text-tsrl {
    font-family: 'tSRL';
}
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(10deg); }
   95% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.wiggle {
  display: inline-block;
  animation: wiggle 2.5s infinite;
}

.wiggle:hover {
  animation: none;
}

h2, h3, h4 {
    color: rgb(16, 33, 79);
    font-family: 'tSRL';
}

.notice-body {
    display:inline-flex;
    align-items: center;
}
.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow:  rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
       -moz-box-shadow:  rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
            box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
           
}
.notice:hover{
    -webkit-box-shadow:  rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px;
       -moz-box-shadow:  rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px;
            box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px;
}
.notice-sm {
    padding: 10px;
    font-size: 80%;
}
.notice-lg {
    padding: 35px;
    font-size: large;
}
.notice-tsrl {
    border-color: #a580d0;
}
.text-purple {
    color: #a580d0;
}
.btn-tsrl{
    background-color: #a580d0;
    color:white;
}
.btn-tsrl:hover{
    background-color: #9057d2;
    color: white;
}
.notice-success {
    border-color: #80D651;
}
.notice-success>strong {
    color: #80D651;
}
.notice-info {
    border-color: #45ABCD;
}
.notice-info>strong {
    color: #468ccf;
}
.notice-warning {
    border-color: #FEAF20;
}
.notice-warning>strong {
    color: #FEAF20;
}
.notice-danger {
    border-color: #d73814;
}
.notice-danger>strong {
    color: #d73814;
}
.btn-theme-main {
    background-color: #5f5fd3ff;
    color: white;
}
.btn-theme-main:hover {
    background-color: rgb(80, 80, 172);
    color: white;
}
.text-main {
    color: #5f5fd3ff;
}

.tsrl-well {
    background-color:  #6091c3ff;
    background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #a580d0 100%);
  border-top: 1px solid rgb(69, 0, 134);
  border-bottom: 3px solid rgb(69, 0, 134);
  
  }
  
  .tsrl-logo {
    -webkit-filter: drop-shadow( 3px 3px 5px rgba(0, 0, 0, .4));
    filter: drop-shadow( 3px 3px 5px rgba(0, 0, 0, .4));
  }
  
  
  .fadein
  {
      opacity:0;
      transition: 1.25s ease-out;
  }
  
  .in
  {
    opacity: 1;
  }