.drawer {
  position: fixed;
  top: 60px;
  right: -481px;
  min-width: 476px;
  max-width: 1000px;
  width: 476px;
  height: calc(100% - 160px);
  background-color: #f8f9fa;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 1050;
  border-left: 1px solid #ccc;
  overflow: visible;
}

.drawer.open {
  right: 0;
}

.cue-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}


.resizer {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
}

.drawer-tab {
  position: absolute;
  left: -40px;
  width: 40px;
  height: 60px;
  background-color: #A5A9B4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1060;
  transform: translateY(-50%);
}


.drawer-tab-shadow {
  position: absolute;
  left: -40px;
  width: 40px;
  height: 60px;
  background-color: #5f5c5c; /* mörkare grå */
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: inset -4px 3px 6px rgba(0, 0, 0, 0.3), -1px 0 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1060;
  transform: translateY(-50%);
  visibility: hidden;
}


.drawer-tab-btn {
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
}

.drawer-tab-btn-unshadow {
  filter: invert(1);
  
}

.drawer-tab-btn-shadow {
  filter: invert(0.7);
}


.drawer-playlist-icon  { background-image: url('/static/admin/icons/playlist.svg'); }
.drawer-cue-icon       { background-image: url('/static/admin/icons/cue.svg'); }
.drawer-settings-icon  { background-image: url('/static/admin/icons/settings.svg'); }






.player-drawer-class {
  position: fixed;
  bottom: -300px; /* gömd nere */
  right: 40px;
  min-height: 300px;
  max-height: calc(100% - 120px);
  min-width: 476px;
  max-width: 1000px;
  width: 476px;
  height: 300px;
  background-color: #fff;
  transition: bottom 0.3s ease;
  z-index: 0;
  overflow: visible;
}

.player-drawer-class.open {
  bottom: 100px;
}



.resizer-width {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
}


.resizer-height {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  cursor: ns-resize;
  background: transparent;
  z-index: 1000;
}





.drawer-left {
  position: fixed;
  top: 60px;
  left: -616px;
  min-width: 400px;
  max-width: 800px;
  width: 611px;
  height: calc(100% - 160px);
  background-color: #f8f9fa;
  box-shadow: 2px 0 5px rgba(0,0,0,0.2);
  transition: left 0.3s ease;
  z-index: 1050;
  border-left: 1px solid #ccc;
  padding-left: 40px;
  overflow: visible;
}

.drawer-left.open {
  left: 0;
}

.resizer-left {
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
}




@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.spin {
}



.wheel-right img {
  position: absolute;
  right: 116px; /* X - (img width / 2) */
  top: 82px;   /* Y - (img height / 2) */
}

.wheel-left img {
  position: absolute;
  left: 117px; /* X - (img width / 2) */
  top: 82px;   /* Y - (img height / 2) */
}


.wheel-left-player img {
  position: absolute;
  left: 30px; /* X - (img width / 2) */
  top: 20px;   /* Y - (img height / 2) */
}

.wheel-right-player img {
  position: absolute;
  right: 30px; /* X - (img width / 2) */
  top: 20px;   /* Y - (img height / 2) */
}


.wheel-player-icon {
  width: 18px !important;
  height: auto !important;
}

.small-circle-left {
  position: absolute;
  width: 30px; 
  height: 30px; 
  background-color: darkgray; 
  border-radius: 50%; 
  top: 29px; 
  left: 39px; 
  z-index: 2; 
  transform: translate(-50%, -50%);
}

.small-circle-right {
  position: absolute;
  width: 30px; 
  height: 30px; 
  background-color: darkgray; 
  border-radius: 50%; 
  top: 29px; 
  right: 39px; 
  z-index: 2; 
  transform: translate(50%, -50%);
}


.playlist-box-class {
	position: absolute;
	top: 160px;
	left: 50px;
	right: 50px;
	bottom: 100px;
	color: black;
	padding: 10px;
	overflow: auto;
}

.track-list-class {
	list-style: none;
	padding: 0; 
	margin: 0;
}

@media screen and (max-width: 1500px) {
	.drawer {
	  height: calc(100% - 212px);
	}
	.drawer-left {
	  height: calc(100% - 212px);
	}

	.player-drawer-class {
	  max-height: calc(100% - 172px);
	}

	.player-drawer-class.open {
	  bottom: 152px;
	}
}


@media (max-width: 516px) {
  .drawer {
    min-width: 0;
    width: calc(100vw - 40px);
    right: calc(-1 * (100vw - 40px));
    max-width: calc(100vw - 40px);
  }
  
  .drawer-left {
    min-width: 0;
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    left: calc(-1 * (100vw - 40px));
  }
}