:root {
   --blue: #1e90ff;
   --white: #ffffff;

   --control: rgb(47, 58, 61);
}

body,
html {
   margin: 0;
   padding: 0;
   background: #fff
}

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px
}

.at-wrap {
   width: 100vw;
   height: 100vh;
   /* height: 300px; */
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative
}

.at-content {
   position: relative;
   overflow: hidden;
   flex: 1 1 auto;
   padding-left: 2px;
}

.at-sidebar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 48px;
   display: flex;
   align-content: stretch;
   z-index: 1001;
   border-right: 1px solid rgba(0, 0, 0, .12);
   background: #f7f7f7;
   display: none
}

.at-viewport {
   overflow-y: auto;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding-right: 20px
}

.at-footer {
   flex: 0 0 auto;
   background: #555;
   color: #fff
}

.at-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1002;
   backdrop-filter: blur(3px);
   background: rgba(0, 0, 0, .5);
   display: flex;
   justify-content: center;
   align-items: flex-start
}

.at-overlay-content {
   margin-top: 20px;
   background: #fff;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);
   padding: 10px
}

.at-sidebar-content {
   width: 100%
}

.track-name {
   display: inline-block;
   margin-left: 5px;
   font-size: 14px;
   font-weight: 700
}

.at-tracks {
   padding-right: 20px !important
}

.at-track-list {
   text-align: right
}

.at-track {
   display: inline-block;
   position: relative;
   transition: background .2s;
   cursor: pointer;
   width: 64px;
   height: 48px
}

.at-track:hover {
   background: rgba(0, 0, 0, .1)
}

.at-track>.at-track-details {
   position: absolute;
   top: 79px;
   width: 100%;
   background: #f7f7f7;
   left: 0;
   text-align: center;
   padding: 3px 0;
   transition: background .2s
}

.at-track>.at-track-actions {
   position: absolute;
   top: 48px;
   left: 0;
   width: 100%;
   background: #f7f7f7;
   text-align: center;
   height: 31px;
   text-align: center;
   transition: background .2s
}

.at-track-actions>.at-track-mute {
   border: 1px solid #999;
   border-radius: 3px;
   padding: 3px 9px;
   width: max-content;
   margin: 0 auto
}

.at-track-actions>.at-track-mute:hover {
   background: #555;
   border-color: #555;
   color: #fff
}

.at-track-actions>.at-track-mute.active {
   background: #890000;
   border-color: #890000;
   color: #fff
}

.at-track.active>.at-track-actions,
.at-track.active>.at-track-details,
.at-track:hover>.at-track-actions,
.at-track:hover>.at-track-details {
   background: #dedede
}

.at-track>.at-track-icon {
   flex-shrink: 0;
   font-size: 27px;
   opacity: .5;
   transition: opacity .2s;
   width: 48px;
   height: 48px;
   align-items: center;
   padding: 9px;
   box-sizing: border-box;
   margin: 0 auto
}

.track-icon {
   width: 32px;
   height: 32px;
   margin: 0 auto
}

.at-track-name {
   font-weight: 400;
   margin-bottom: 7px
}

.at-track:hover>.at-track-icon {
   opacity: .8;
   background: #dedede
}

.at-track.active {
   background: #dedede
}

.at-track.active>.at-track-icon {
   color: #890000;
   opacity: 1
}

.at-track>.at-track-name {
   font-weight: 500
}

.at-controls {
   flex: 0 0 auto;
   display: flex;
   justify-content: space-between;
   /* background: #000; */
   background: var(--control);
   color: #fff
}

.at-controls>div {
   display: flex;
   justify-content: flex-start;
   align-content: center;
   align-items: center
}

.at-controls>div>* {
   display: flex;
   text-align: center;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding: 4px;
   margin: 0 3px
}

.at-controls .btn {
   color: #fff;
   border-radius: 0;
   height: 40px;
   width: 40px;
   height: 40px;
   font-size: 16px
}

.at-controls .btn.disabled {
   cursor: progress;
   opacity: .5
}

.at-controls a.active {
   background: #890000;
   text-decoration: none
}

.at-controls .btn i {
   vertical-align: top
}

.at-controls select {
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   border: none;
   width: 100%;
   height: 40px;
   background: var(--control);
   padding: 4px 10px;
   color: #fff;
   font-size: 16px;
   text-align-last: center;
   text-align: center;
   -ms-text-align-last: center;
   -moz-text-align-last: center;
   cursor: pointer
}

.at-song-title {
   font-weight: 700
}

.at-cursor-bar {
   /* background: rgba(255, 242, 0, .25); */
   background: rgba(125, 132, 164, 0);
}

.at-selection div {
   background: rgba(64, 64, 255, .1)
}

.at-cursor-beat {
   background: rgba(64, 64, 255, .75);
   width: 3px
}

.at-highlight * {
   fill: #0078ff;
   stroke: #0078ff
}

.error-message {
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 95%;
   max-width: 400px;
   background: #fff;
   border-radius: 20px;
   padding: 20px;
   z-index: 100;
   text-align: center;
   display: none
}

.player-icon {
   background: url(tab-player-icons.svg) left top no-repeat transparent;
   width: 16px;
   height: 16px
}

.player-icon.icon-stop {
   background-position: 0 0
}

.player-icon.icon-play {
   background-position: -49px 0
}

.player-icon.icon-pause {
   background-position: -24px 0
}

.player-icon.icon-metronome {
   background-position: -174px 0
}

.player-icon.icon-loop {
   background-position: -72px 0;
   width: 21px
}

.player-icon.icon-print {
   background-position: -102px 0
}

.player-icon.icon-zoom {
   background-position: -128px 0;
   width: 20px
}

.player-icon.icon-speed {
   background-position: -150px 0;
   width: 26px
}

.player-icon.icon-track {
   background-position: -196px 0
}

@media screen and (max-width:1050px) {
   .at-song-info {
      display: none !important
   }
}

@media screen and (max-width:800px) {
   .at-controls {
      height: 100px;
      position: relative
   }

   .at-controls-left,
   .at-controls-right {
      position: absolute;
      left: 50%;
      top: 50px;
      transform: translateX(-50%)
   }

   .at-controls-right {
      top: 0;
      width: max-content
   }
}

@media screen and (max-width:580px) {
   .at-controls-left {
      left: 0;
      transform: none
   }

   .at-controls-right {
      width: 100%
   }

   .at-tracks {
      position: absolute;
      right: 0;
      top: 60px
   }
}

@media screen and (max-width:400px) {
   .at-layout {
      display: none !important
   }
}

@media screen and (max-width:300px) {
   .at-song-position {
      display: none !important
   }
}

@media screen and (max-width:280px) {
   .at-print {
      display: none !important
   }
}

@media only screen and (orientation:portrait) {
   .at-sidebar {
      width: 112px;
      height: auto;
      right: 0;
      left: auto
   }

   .at-track {
      display: block;
      width: 48px
   }

   .at-track-list {
      float: right
   }

   .at-track>.at-track-details {
      top: 0;
      left: -64px;
      width: 64px
   }

   .at-track>.at-track-actions {
      top: 20px;
      left: -64px;
      width: 64px;
      height: 28px
   }
}